[멋사] 4주차 과제 - useState 렌더링, useContext

4주차 세션 중 궁금한 부분 2개 정리하기
-> useState가 어떻게 렌더링을 야기하는지 정리
-> useContext 정리

1.useState

useState는 어떻게 렌더링을 야기할까?

useState는 state의 값에 대해 리렌더링이 일어나더라도 값을 유지해야한다. (로컬 변수 let을 사용하지 않는 이유) 그리고, 리렌더링을 야기해야한다.

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

state: 현재 상태 값을 가지는 변수 (초깃값 initialState)
setState: state 값을 수정할 수 있는 함수

setState의 렌더링
1.새로운 값으로 업데이트

setState(newState);

• setState 함수에 업데이트하고자 하는 값을 넣어 수정한다.

2.함수형 업데이트

setState((prev)=>prev+1);

• 현재 state 값을 전달받고, 반환해주는 방식으로 값을 수정한다.
• 함수형 업데이트를 이용하면 Batch Update(리렌더링 최소화하는 방식)를 해결할 수 있다.

setState는 비동기적으로 수행되므로(batch update 특성상 수정작업을 동기적으로 처리 불가능),
수정작업 이후 수정된 state를 이용해 동기적인 작업에서 변경된 state값을 사용할 수 없다.
-> useEffect의 의존성배열로 문제해결 가능하다.

2.useContext

Context란?

일반적인 React 어플리케이션에서 데이터는 props를 통해 부모에서 자식으로 전달되지만,
컴포넌트의 deps가 깊어지게 되면 사용하지도 않는 props를 오직 전달하기 위해 받아오고 전달하는 경우가 있다. (통로처럼) -> 이를 Props Drilling이라고 한다.
이러한 문제를 해결하기 위해 전역적으로 값을 공유할 수 있도록 해주는 것이 Context이다.
(useContext는 생성된 Context를 사용할 수 있게 도와주는 Hook)

어플리케이션 안에서 여러 컴포넌트들에게 props를 전달해야 하는 경우 context를 이용하면
명시적으로 props를 넘겨주지 않아도 값을 공유할 수 있다.
즉, 데이터가 필요할 때마다 props를 통해 전달할 필요 없이 context를 이용해 공유한다

Context API

• createContext: context 객체를 생성한다.
• Provider: 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
• Consumer: context의 변화를 감시하는 컴포넌트이다.

Context 생성

const SomeContext = createContext(defaultValue);

생성된 SomeContext는 지정된 범위 내에서 props로 전달되지 않아도 바로 사용될 수 있다.

Context.Proivder

<SomeContext.Provider value={someValue}>
  <ChildComponent />
</SomeContext.Provider>

생성된 Context를 어떤 범위 내에서 사용할지 Provider를 통해 지정할 수 있다.
Provider로 감싼 자식 컴포넌트에서는 SomeContext값을 이용할 수 있다.

useContext

• 지정된 범위 내에서 Context 객체를 가져옴으로써 그 값을 사용할 수 있도록 하는 Hook이다.

const contextValue = useContext(SomeContext);

App.js

import { createContext } from "react";
import Children from "./Children";

// 객체생성
export const AppContext = createContext();

const App = () => {
  const user = {
    name: "readysetq",
    job: "student"
  };
  
  return (
    <>
     <AppContext.Provider value={user}>
      <div>
    	<Children />
      </div>
	 </AppContext.Provider>
	</>
  );
};

export default App;

Children.js

import { useContext } from "react";
import { AppContext } from "./App";

const Children = () => {
  // useContext를 이용해서 따로 불러온다.
  const user = useContext(AppContext);
  return (
    <>
	  <h3>AppContext에 존재하는 값의 name은 {user.name}입니다.</h3>
	  <h3>AppContext에 존재하는 값의 job은 {user.job}입니다.</h3>
	</>
  );
};

export default Children;

useContext를 사용하면 기존의 Context 사용 방식보다 더 쉽고 간단하게 Context 사용이 가능하다.