전영호의 개발 블로그

Redux 사용 방법

Redux 를 사용하는 이유 )

: props 드릴링을 방지하기 위하여 사용! Redux 를 사용하면 props 를 사용하지 않고도 State 공유가 가능하다!

redux 를 사용하지 않고 props 를 넘기는 경우 props 가 필요한 하위 컴포넌트까지 최초 선언된 컴포넌트 부터 하위의 하위 컴포넌트까지 이어 받아 전달해야하기 때문에 props 의 복잡도가 증가하며 유지보수가 힘들어진다.

또한 최하위 컴포넌트에서 props 의 State 를 변경하게 되면 해당 State 를 하위로 전달하기 위해 props 로 받아온 컴포넌트까지 불필요한 재렌더링 문제가 발생한다.

function App() {
  const [user, setUser] = useState("Alice");
  console.log("🔄 App 렌더링");

  return <Parent user={user} setUser={setUser} />;
}

function Parent({ user, setUser }) {
  console.log("🔄 Parent 렌더링");
  return <Child user={user} setUser={setUser} />;
}

function Child({ user, setUser }) {
  console.log("🔄 Child 렌더링");
  return <GrandChild user={user} setUser={setUser} />;
}

function GrandChild({ user, setUser }) {
  console.log("🔄 GrandChild 렌더링");
  return (
    <div>
      <h1>Hello, {user}!</h1>
      <button onClick={() => setUser("Bob")}>Change User</button>
    </div>
  );
}

redux 를 사용하지 않은 경우

GrandChild 컴포넌트에서 전달받은 user props 가 변경될 시 모든 컴포넌트에서 렌더링 콘솔이 출력된다.

1. Redux 설치

더보기

1. Redux 는 React 버전 18.1.0 이상부터 제대로 사용할 수 있으므로 package.json 에서 react 와 react-dom 버전을 확인한다.

 

 

 

2. Redux 설치

npm install @reduxjs/toolkit@1.8.1 react-redux

 터미널을 켜서 프로젝트 디렉토리로 접속한 뒤 위 명령어를 입력하여 redux 를 설치

2. Redux 세팅 및 Redux State 사용 방법

더보기

1. Store.js 작성

 

 

 

2. Provider 와 생성한 store 를 index.js 에서 import 하여 전체 컴포넌트를 Provider 컴포넌트로 감싸준 뒤 store 를 설정

 

 

 

 3. store.js 에 선언하고 싶은 State 를 생성한 뒤 reducer 에 등록 ( Redux 에 State 선언 )

 

 

 

 4. 해당 State 를 필요한 곳에서 불러와서 사용하기

 

 

 

 

5. 여러 State 를 사용하는 경우

3. Redux State 변경 방법

더보기

1. 변경 함수를 store.js 에 선언한 뒤 export

 

 

 

2. 변경할 컴포넌트에서 useDispatch 함수를 사용하여 store.js 의 State 데이터의 변경을 요청하여 사용

 

 

 

 

 

 

3. State 변경 함수를 여러개 선언하여 사용하기

 

 

Redux 를 사용할때 유의할 점

1. State 변경함수는 직접 호출하는 것이 아닌 useDispatch 를 사용해 호출하는 형태로 사용해야 한다.

2. State 를 변경할때 매개변수를 전달하여 사용하는 경우 매개변수를 꼭 payload 함수를 사용해 해당 매개변수의 값을 꺼내와서 사용해야 한다.

3. js 파일을 분리하여 State 를 여러 파일에 분리하여 사용할 수 있다.

React Component 란?

React 컴포넌트는 페이지에 렌더링할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각입니다. 가장 간단한 React 컴포넌트는 React 엘리먼트를 반환하는 일반 JavaScript 함수

( 함수 뿐만 아니라 class 로도 컴포넌트를 작성할 수 있다 )

Component 규약

1. 컴포넌트 함수의 첫 글자는 대문자로 시작한다.

2. 컴포넌트의 리턴 값은 최상단의 하나의 태그만을 갖는다

컴포넌트를 사용하면 HTML 요소들을 더욱 편리하게 관리할 수 있으며 useState 와 useEffet 를 사용하여 동적인 화면을 구성할 수 있다.

useState 란?

리엑트의 useState 는 함수형 컴포넌트에서 상태를 관리하기 위한 Hook 중 하나

1. useState 를 import

import { useState } from 'react';
// useState 를 사용하기 위해선 react 에서 제공하는 useState 를 import!!

2. State 변수를 선언 및 사용

import { useState } from 'react';

function Example() {
	// like 는 사용 변수, setLike 는 State 변경 함수
	let [like, setLike] = useState(0);

	return (
            <div>
                <p onClick = { () => {
                        setLike(like + 1); // useState 변경 함수 사용하여 값을 변경
                }}>좋아요👍🏻 {like}</p> // useState 변수 사용
            </div>
    	);
}

useState 변수를 사용해 저장된 State 값을 꺼내서 사용하고, 변경 함수를 사용하여 State 에 저장된 값을 변경한다.

useState 는 component 를 띄우거나 띄우지 않거나 등 상태를 변경하는데 사용된다.