벨로퍼트 모던 리액트

https://react.vlpt.us/

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

Props

:어떠한 값을 컴포넌트에게 전달하고자 할때 사용

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 사용

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;

불변성 유지

리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고,

새로운 객체를 만들어서 새 객체에 변화를 주어야 됩니다.

setInputs({
  ...inputs,
  [name]: value
});

이러한 작업을, "불변성을 지킨다" 라고 부릅니다. 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행됩니다. 만약에 inputs[name] = value 이런식으로 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않습니다.

불변성을 지키면서 배열에 항목을 추가하는 방법

1. spread 연산자 이용 : setUsers([...users, user]);

2. concat 함수 이용 : setUsers(users.concat(user));

useRef

1. 컴포넌트에서 특정 DOM을 선택해야 할때,

2. 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할때 : 값이 바뀌어도 리렌더링 되지 않음, 설정 후 바로 조회  → setTimeout, setInterval 을 통해서 만들어진 id, 외부 라이브러리를 사용하여 생성된 인스턴스, scroll 위치