벨로퍼트 React 내용 정리 (1장 1~9)

출처: https://react.vlpt.us/

벨로퍼트와 함께하는 모던 리액트 · GitBook

1. props = properties

2. 비구조화 할당 = 구조분해 할당

 

3. defaultProps로 기본값 설정

Hello.defaultProps = {
  name: '이름없음'
}

4. 단축 평가 논리 계산법

 

5. useState

 // 업데이트 하고 싶은 새로운 값을 파라미터로 넣어주는 방식
 const onIncrease = () => {
    setNumber(number + 1);
  }
  
// 함수형 업데이트  
// 값을 업데이트 하는 함수를 파라미터로 넣어주는 방식  
const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

6. input 상태 관리

예시) input 의 onChange 라는 이벤트를 사용하는 경우

이벤트(onChange, onClick 등)에 등록하는 함수에서는 이벤트 객체 e 를 파라미터로 받아와서 사용 할 수 있는데

이 객체의 e.target 은 이벤트가 발생한 DOM 인 input DOM 을 가르킨다.

이 DOM 의 value 값, 즉 e.target.value 를 조회하면 현재 input 에 입력한 값이 무엇인지 알 수 있다.

input 의 상태를 관리할 때에는 input 태그의 value 값을 설정해줘야 상태가 바뀌었을때 input 의 내용도 업데이트 된다.

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
  };
  
   const onReset = () => {
    setText('');
  };
  
  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

7. input이 여러개일 때 상태 관리

input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조한다. useState 에서는 문자열이 아니라 객체 형태의 상태를 관리한다.

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정 (Computed Property Names, 계산된 속성 이름)
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    })
  };


  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고 (= 불변성을 지킨다), 새로운 객체를 만들어서, 새 객체에 변화를 주어야 필요한 리렌더링이 진행된다.