엘리스 AI 트랙 07주차 - React 기초 III (2/3) 🔥

✔ 07주차. 웹 프론트엔드 II

<학습 목표>

1. 클래스 컴포넌트와 함수 컴포넌트의 공통된 점과 차이점을 비교하여 상황에 맞게 사용할 수 있습니다.

2. Hook을 사용해 함수 컴포넌트에서도 State의 값을 변경할 수 있습니다.

3. State관리를 하는 방법과 구조를 이해하고 Redux를 사용하는 이유를 알 수 있습니다.

---

[01 Controlled Component 및 State 끌어올리기]

1. Forms

  - 폼(form) : 웹 페이지에서 사용자가 정보를 입력할 수 있도록 만든 HTML의 형태. (입력을 위한 양식)

  - Controlled Component(제어 컴포넌트) : 사용자가 state를 제어할 수 있는 컴포넌트. HTML에서 사용하는 폼 엘리먼트 <input>, <select>, <textarea>등을 Controlled Component를 통해 React에서도 동일하게 구현할 수 있음

  - input 태그

class InputData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    // 이벤트 바인딩
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    
  }

  // state 값 변경하는 이벤트
  handleChange(event) {
  // setState를 사용해 기존 state 값을 handleChange 로 전달받은 value로 변경
    this.setState({value: event.target.value});
    
  }

  // Submit 버튼 클릭 시 alert 이벤트
  handleSubmit(event) {
    alert('경고! ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          경고 문구를 입력하세요:        
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(<InputData />,document.getElementById('root'));

serviceWorker.unregister();

  - textarea 태그

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '200자 이내의 자기소개서를 입력해주세요'
    };

    // 이벤트 바인딩
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    
  }

  // state 값 변경하는 이벤트
  handleChange(event) {
    // textarea 의 value 를 setState 를 사용해 state 값으로 변경
    this.setState({value: event.target.value});
    
  }

  // 제출 버튼 클릭 시 경고창을 출력하는 이벤트
  handleSubmit(event) {
    alert(this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} >
        <h2>당신을 소개하는 글을 200자 이내로 적어주세요.</h2>
          <textarea value={this.state.value} onChange={this.handleChange} />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(<EssayForm />,document.getElementById('root'));

serviceWorker.unregister();

  - select 태그

class YearOfBirth extends React.Component {
  constructor(props) {
    super(props);
    // select 태그의 초기 상태 값을 설정
    this.state = {value: '1990'};

    // 이벤트 바인딩
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    
  }

  // select 태그에서 handleChange 의 value 로 전달받은 값을 setstate 를 사용해 변경함
  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('태어난 년도: ' + this.state.value);
    event.preventDefault();
  }

  render() {
  //form태그에 handleSubmit이벤트를 등록합니다.
    return (
      <form onSubmit={this.handleSubmit} >
        <label>
          태어난 년도를 선택하세요 : 
          <select value={this.state.value} onChange={this.handleChange}>            
            <option value="1960">1960~1969</option>
            <option value="1970">1970~1979</option>
            <option value="1980">1980~1989</option>
            <option value="1990">1990~1999</option>
            <option value="2000">2000~2009</option>
            <option value="2010">2010~2019</option>
            <option value="2020">2020~2029</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
ReactDOM.render(<YearOfBirth />,document.getElementById('root'));

serviceWorker.unregister();

  - 다중입력

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ' ',
      age: 20
    };

    // 이벤트 바인딩
    this.handleInputChange = this.handleInputChange.bind(this);
    
  }
  
  handleInputChange(event) {
    // form 으로 입력받은 값을 value, name으로 저장
    const target = event.target;
    const value = target.value;
    const name = value.name;

    // 입력받은 값을 state로 넘김
    this.setState({
        [name] : value,
        age  : value
    });
    console.log(this.state.name + ", " + this.state.age);
  }

  render() {
    return (
      <form>
        <label>
          이름 :  <input type='text' name='name' onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          나이 :  <input type='number' name='age' onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

ReactDOM.render(<Reservation />,document.getElementById('root'));

  - Input Null 값 제어 : input 태그의 value 지정시 사용자가 값을 변경할 수 없음 ex. <input value='데이터지정' />

const element = (
    <fieldset>
    <legend>개인정보 입력란</legend>
    이름 : 
        // value 부분에 데이터가 입력되어 있기때문에 수정X
        <input value="김지우" />
        <br/>
        주민등록번호 : 
        <input value="971029-***"/>
        <br/>
        주소 : 
        // value 가 Null 이므로 수정 가능
        <input value={null} />
        <br/>
        전화번호 : 
        <input value={null} />
    </fieldset>
)

ReactDOM.render(element, document.getElementById('root'));

 

2. State 끌어올리기
  - state 끌어올리기 : 통합한 state를 가장 가까운 부모 컴포넌트가 관리하는 것, 여러 컴포넌트에 동일한 데이터를 변경하고 반영하고 싶을 때, 공통된 부모 컴포넌트로 통합하고 관리하기 위해서 사용

  - 환율계산

const unitNames = {
  K: '원화',
  D: '달러'
};

function toDollar(krw) {
  return krw*0.00091;
}

function toKRW(dollar) {
  return dollar*1098.23;
}

function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = convert(input);
  return output.toString();
}

class MoneyInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onMoneyChange(e.target.value);
  }

  render() {
    const unit = this.props.unit;
    const money = this.props.money;

    return (
      <fieldset>  
        <legend>환율 계산기</legend>
        {unitNames[unit]}: <input
          value={money}
          onChange={this.handleChange} />
          
      </fieldset>      
    );
  }
}

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleKRWChange = this.handleKRWChange.bind(this);
    this.handleDollarChange = this.handleDollarChange.bind(this);
    this.state = {money: '', unit: 'K'};
  }

  //
  handleKRWChange(money) {
    this.setState({unit: 'K', money});
  }

  handleDollarChange(money) {
    this.setState({unit: 'D', money});
  }

  render() {
    const unit = this.state.unit;
    const money = this.state.money;
    
    const calcKRW = unit === 'D' ? tryConvert(money, toKRW) : money;
    const calcDollar = unit === 'K' ? tryConvert(money, toDollar) : money;
    return (
      <div>
        <MoneyInput unit="K" money={calcKRW} onMoneyChange={this.handleKRWChange} />
        <MoneyInput unit="D" money={calcDollar} onMoneyChange={this.handleDollarChange} />
      </div>
    );
  }
}

ReactDOM.render(<Calculator/>, document.getElementById('root'));

 

3. Composition vs Inheritance
  - composition(합성)과 inheritance(상속) : 컴포넌트를 만드는 2가지의 다른 패턴. 
  - 합성(Composition)
    - 서로 다른 객체를 여러 개를 붙여서 새로운 기능이나 객체를 구성
    - 합성할 클래스를 변수에 할당 후 사용
    - 서로의 클래스를 융통성 있게 합성할 수 있습니다.
  - 상속(Inheritance)
    - 다른 부모 클래스를 먼저 만든 후 자식 클래스가 부모의 클래스를 상속

 

  ① Composition(합성)
    - 컴포넌트에서 다른 컴포넌트를 담는 것. 특정 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 예상할 수 없는 경우가 있기 때문에 해당 컴포넌트가 반환하는 React 엘리먼트 안에 직접 {props.children}를 넣어주는 것이 좋음. (어떠한 자식 props를 받더라도 렌더링이 가능)

function OutLayer(props) {
  return (
    <div>
      <h4>아래의 항목에 내역을 입력해주세요.</h4>
      <div style={{border: '3px solid green'}}>
        {/* 자식 엘리먼트 호출 */}
        {props.children}
      </div>
    </div>
  );
}

function InformationForm() {
  return (
    // OutLayer 컴포넌트를 호출하고, 자식 엘리먼트 작성
    <OutLayer >
        <fieldset>
        이름: <input type="text"/>
        <br/>
        성별: 남<input type="checkbox" />  여<input type="checkbox" />
        <br/>
        전화번호: <input type="text"/>
        </fieldset>
    </OutLayer>
  );
}

ReactDOM.render(<InformationForm/>, document.getElementById('root'));

  ② Inheritance(상속)
    - 상속보다는 합성이 명시적이고 안전한 방법임, UI가 아닌 기능을 여러 컴포넌트에서 재사용하기를 원한다면 상속보다는 별도의 자바스크립트 모듈로 분리하면 해당 함수, 객체, 클래스 등을 import 하여 사용할 수 있다. (상속을 사용해야 한다면 extends를 이용해서 사용할 수 있음)

 

[02 Hook 개요]

1. Hook이란?
  - Hook : 기존 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능 (함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into) 할 수 있게 해주는 것)
  - Hook을 사용하는 이유 : 클래스 없이 React를 사용할 수 있게 해주기 때문에.
  - Hook의 장점

    ① 컴포넌트의 함수가 많아질 때 클래스 구성 요소로 리팩토링할 필요가 없음
      - 함수 컴포넌트에서 클래스 컴포넌트로 변경하려면 리팩토링이 필요하지만, hooks 사용시 함수 구성 요소로만 상태 관리를 할 수 있기 때문에 리팩토링 노력이 최소화됨

    ② UI에서 로직을 더 쉽게 분리하여 두 가지 모두 재사용 가능함
      - Hook 및 UI를 사용하면 분리하기가 더 쉽고 코드를 재사용하기 위한 로직을 쉽게 만들 수 있음

    ③ 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있음
      - 기존의 코드와 잘 호환이 되기 때문에 필요한 곳에서 Hook을 사용하면 됨

    ④ Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화 할 수 있음
      - Hook을 이용하면 컴포넌트별로 독립적인 테스트와 재사용이 가능
  - Hook의 종류 : State Hook, Effect Hook

 

2. State Hook

  - Hook이 나오기 전에는 컴포넌트의 상태 관리를 하려면 클래스 기반 React 컴포넌트를 작성해야 했으나 State Hook의 useState()를 사용하면 함수형 컴포넌트에서 이를 간단히 사용할 수 있음. 

  - ex. const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = userState(<상태 초깃값>);
※ State Hook이 등장한 이후 기존 컴포넌트를 재작성하는 것은 권장하지 않지만 새로 작성하는 컴포넌트는 Hook을 이용하는 것을 권장

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  return (
     <div>
       <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>
           Click me
         </button>
     </div>
  );
}

3. Effect Hook
  - Effect Hook의 useEffect()는 함수형 컴포넌트 내에서 side effects를 수행할 수 있게 해줌. (useEffect()는 함수형 컴포넌트에서 side effects들을 실행하는 것)

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

4. Hook의 규칙
  ① 최상위(at the Top Level)에서만 Hook을 호출해야 함
    - 반복문(while), 조건문 (if) 혹은 중첩된 함수 내에 Hook 호출X (Hook은 렌더링 시 항상 동일한 순서로 호출이 되어야 하며 그렇지 않을 경우 버그 발생)
  ② 오직 React 함수 내에서 Hook을 호출해야 함
    - 일반적인 자바스크립트 함수에서 Hook 호출X. Hook은 React 함수 컴포넌트, 나만의 Hook에서만 호출O

---

※ 수업 자료의 출처는 K-Digital Training x 엘리스 인공지능 서비스 개발 기획 1기 (elice.io/)입니다.