The Ultimate React Course 2024: React, Redux & More 의 필기 위주로 작성되었습니다. 해당 강의는 강의 내용 기반으로 블로그 글 작성이 허용된 강의입니다.

기초

핵심이다!! React의 이름부터 철학이 담겨있는 셈이다.
useState 사용법 기초는 생략.

• 상태 업데이트는 꼭 setter 함수를 사용해야 한다!
• 상태 업데이트는 리렌더링을 trigger한다.

함수 전달시 주의사항

<button onClick={doSomething()}/> // Wrong!
<button onClick={doSomething}/> // Good
<button onClick={() => doSomething()}/> // Good

첫번째 줄처럼 작성 시 컴포넌트 함수가 실행될때 doSomething()을 함수 호출로 보아서 호출만 하고 끝난다. 아래처럼 함수 값만 전달하거나, 콜백 함수로 사용해야 원하던 효과가 나온다.

현 상태 기반 state 업데이트

const [step, setStep] = useState(1);

function handleNext() {
  setStep(step + 1);
  setStep(step + 1);
}

위 handleNext 함수가 실행되도 step+1은 한번만 실행된다.

const [step, setStep] = useState(1);

function handleNext() {
  setStep((s) => s + 1);
}

현 상태 기반으로 할땐 위처럼 콜백 함수를 쓰는것이 올바른 방법이다.

상태 정의- 언제, 어디서?

프로젝트에서 state를 만들때 어디에 만들어야 할지, 언제 만들어야 할지 결정을 돕는 플로우차트다. 리액트에서 컴포넌트 데이터 흐름은 단방향이기에 매우 중요하게 생각해야할 부분이고, 앞으로도 프로젝트를 진행할때 중요하게 참고할 수 있을것 같다.

요지는 "Always start with local state"고, 필요할 시 lift-up을 진행하면 된다.

반대로 데이터 전달이 필요한 경우?

위 예시에선 coupons 상태가 하위 2개 자식 컴포넌트들에게도 사용되어야 하여서 상위 컴포넌트로 lift-up되었다. 하지만 반대로 이제 Promotions 컴포넌트에서 쿠폰코드를 업데이트해서 상위 컴포넌트의 상태를 업데이트해야 한다면 어떻게 해야할까?

해결책은 간단하다: 상위 컴포넌트에서 setCoupons 함수를 가지고 있다가, 이를 prop으로 하위 컴포넌트에게 전달해주면, 상위 컴포넌트의 coupons 컴포넌트가 업데이트된다. 이를 Inverse data flow라고 한다.