React - Hooks

Now, Sophia·2021년 10월 28일

TIL-REACT

목록 보기

5/11

React 는 props 를 받아 jsx를 반환 (props ⇒ jsx)

function Component(props) {
  return `<h1>${props.name}</h1>`
 }

Component({name:"seyeon"});

: state, 라이프사이클 때문에 사용
함수는 한번 호출되면은 메모리상에서 사라짐 → state, 라이프사이클 불가능.
항상 최신값을 유지하기 때문에...

함수 컴포넌트에서 react state와 생명주기 기능을 연동할 수 있게 해주는 함수.
함수형 컴포넌트는 기존에 있었는데 state, lifecycle을 사용할 수가 없었음.

react 16.8에서 Hooks의 새로운 기능이 생긴 것임.
함수형 컴포넌트 안에 쓰는 또다른 함수라고 생각하면 된다.

useState, useEffect 같은 내장 Hook을 쓰면 되고, Hook을 직접 만드는 것(custom hook)도 가능하다.

classComponent는 상태와 관련된 로직을 재사용하기가 어렵다.
lifecycle이 많기때문에 컴포넌트들이 복잡함.
함수형에서는 useEffect로 통일됌.

useState :

const [ state, setState ] = useState(initialState=초기값);

모든 상태값을 관리 안하는 이유는 관심사를 분리할 수 있으니까 굳이 하지 않는다.

구조분해 할당 시, 객체는 키값에 따라 구분했지만 배열은 순서의 기준에 따라 구분한다.

Effect Hook
컴디마, 컴디업,컴윌언마~ 등 하나의 API로 통합된 것.

useEffect(function);

useEffect(() → {}, [count])
// 의존성 배열(배열안에 담긴 값들은 추적, 그때마다 업데이트)

모든 렌더링이 완료된 후에 매번 useEffect가 실행된다.

useEffect(() ⇒ {console.log("after render")}); 
// ⇒ 이렇게는 무한루프가 된다. 계속 setState가 되니까

useEffect(() ⇒ {console.log("after render")}, [count]); // ⇒ 두번째인자를 넣음으로써

첫번째 렌더때는 모든 useEffect함수가 실행된다.

useEffect(() ⇒ {console.log("after render")}, [ ]);
// ⇒ 첫번째 렌더때만 실행할 때는 빈배열을 넣어준다.
//  → 여기서는 다음 effect가 없기 때문에, 컴포넌트 언마운드 될 시점에 실행된다.

useEffect(() ⇒ {console.log("after render") 
return() ⇒ console.log('cleanup count')}, [ ]);
//⇒ 다음 effect가 실행될 때, 컴포넌트가 언마운트될 때

렌더된 이후에 뭘 해야할 때 useEffect를 사용한다.

렌더링 이후에 매번 수행된다.
의존성배열을 넣었을 때는 두번째에는 의존성배열에 한 해 수행된다.

useState 훅을 사용하여 React 컴포넌트의 상태를 관리

useEffect 훅을 사용하여 React 컴포넌트의 라이프사이클 관리

함수형에서 props를 받는 것은

function Monsters(props) {}
// props가 전체로 들어옴

매개변수안에서도 구조분해 할당 가능

→ function Monster({name, age, id}){}

Whatever you want