React Hooks 1

1. useState란?

• useState는 React의 내장 훅으로, 함수형 컴포넌트에서 상태를 가질 수 있게 한다.
• 이는 클래스 컴포넌트에서의 setState 메서드를 대체하는 역할을 힌디.
• useState를 사용하면 함수형 컴포넌트 내에서 상태 변수를 선언하고 업데이트할 수 있다.

<사용법 예시>

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

1-1. useState의 문법

• useState 훅은 초기값을 인수로 받고, 현재 상태 값을 포함하는 배열과 상태를 업데이트하는 함수를 반환한다.

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

1-2. useState를 사용하여 상태 업데이트

• 상태 변수를 업데이트하려면, useState에서 반환된 함수를 호출한다. 이 함수는 새로운 값을 인수로 받고, 컴포넌트를 다시 렌더링한다.

setCount(count + 1);

2. useEffec란?

• useEffect란 리액트에서 기본적으로 제공해주는 함수로써, useEffect함수가 포함된 컴포넌트가 처음 마운트되거나 컴포넌트가 리렌더링 될 때, 또는 선언된 변수의 값이 변경되거나 redux store의 값이 변경될 때 실행할 구문들을 정의해놓은 함수이다.

2-2. useEffec의 문법

useEffect(() => {
  ... // 실행할 내용들
});

dependency 값 추가

let something = 2;

useEffect(() => {
  ... // 싫행할 내용 
}, [something]);

  // 비어있는 dependency 추가
useEffect(() => {
  ... // 실행할 내용들
}, []);

• useEffect에는 [] 안에 값이 들어가거나 들어가지 않는 경우가 있다. 이를 dependency 라고 부르는데 dependency 파라미터 값에 의존하여 useEffect 함수가 실행될지 말지를 결정한다.

• 위와같이 dependency값에 something이 들어가 있는 경우에는 해당 변수의 값이 변경될 때, useEffect 함수가 실행된다.

• something이라는 값을 순차적으로 3, 4, 5로 총 세 번 변경하게 되면, 해당 useEffect함수는 3번 실행되게 된다.

• 비어있는 dependency 추가할 경우는 컴포넌트가 처음으로 마운트되었을 때 실행된다.

• 이 경우에만 실행되고 다른 경우에는 실행되지 않기에 초기에 한 번 실행할 작업들이 필요할 때 사용한다.

3.useContext란?

• context는 부모가 자식컴포넌트에게 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 전달할 수 있게 해준다.

• useContext는 context를 좀더 편하게 사용할 수 있도록 도와주는 hook이다.

Context API 3가지 주요 개념

1. reateContext(initialValue) -> 부모컴포넌트에 작성

• context객체를 생성한다.
• Provider와 Consumer 를 반환한다.
  • Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
  • Consumer : context의 변화를 감시하는 컴포넌트이다.
• 파라미터 initialValue는 Provider를 사용하지 않았을 때 적용될 초기값을 의미한다.

2. Context.Provider -> 부모컴포넌트에 작성

• 생성한 context를 하위 컴포넌트에 전달하는 역할을 한다.
  <예시 코드>

import React, { useState, createContext } from "react";
import Mart from "./components/Mart";

export const AppContext = createContext(); // context생성

const initialValue = {
   name: 'kim',
   age: 20
};

  return (
    <>
      <AppContext.Provider value={initialValue}> // Provider로 하위컴포넌트를 감싼다.
        <Children />
      </AppContext.Provider>
    </>
  );
}
export default App;

3. useContext(Context) -> 자식컴포넌트에 작성

• context의 변화를 감시하는 역할을 한다.
• 설정한 상태를 불러올 때 사용한다.
• Context.Consumer를 사용할 수 있지만 hook을 사용하는것이 좀더 깔끔하다.
  <Consumer사용 예시>

// .Consumer 사용시
import React from "react";
import { AppContext } from "./App";

const Children = () => {
  return (
      <AppContext.Consumer> // .Consumer로 감싸준다.
        {(initialValue) => (
          <>
            <h3>이름은 {initialValue.name}입니다.</h3>
            <h3>나이는 {initialValue.age}입니다.</h3>
          </>
        )}
      </AppContext.Consumer>
  );
};

export default Children;

<useContext 사용 예시>

// useContext hook사용시
import React, { useContext } from "react";
import { AppContext } from "./App";

const Children = () => {
  const initialValue = useContext(AppContext); // useContext hook사용. 
  return (
          <>
            <h3>이름은 {initialValue.name}입니다.</h3>
            <h3>나이는 {initialValue.age}입니다.</h3>
          </>
  );
};

export default Children;