React - 컴포넌트 분리, Redux - 개념

컴포넌트 분리 기준

1. React 조건문
2. React 반복문(반복문 컴포넌트에는 key attribute가 들어가야 한다. key={somthing})
3. state를 다루는 컴포넌트(예: Form 등) => state 변경 시 화면 전체가 렌더링 되는 것을 방지하여 최적화를 하기 위해 state를 다루는 컴포넌트는 분리한다.

Redux

Redux (state) -> React의 state는 쓰지 않아도 됨.

장점: 안정성, state 통제 용이성

state = {
isLoggedIn :false,
user: {},
...
} -> store

store는 state와 action, reducer가 다 합쳐진 개념

redux state와 React component는 useSelector로 연결(react-redux 라이브러리 Hook)

1. useSelector : React의 state와 같다고 생각하면 된다.
2. useDispatch : React의 setState와 같다고 생각하면 된다.

• Action -> state를 바꾸는 행동(action읕 통해서만 state를 변경 가능. React의 setState와 비슷)
  ex) 로그인 액션
• Dispatch -> Action을 실행
  ex) 로그인 액션 dispatch
• Reducer -> Action의 결과로 store에 들어있는 state를 어떻게 바꿀지 정의
  ex) 로그인액션 dispatch 시 -> isLoggedIn state를 true로
  액션 하나 당 새로운 state 하나씩 매칭이 되어야 하므로, spread 문법을 사용

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case LOG_IN: {
      return {
        ...state,
        isLoggedIn: true,
        user: action.data,
      };
    }
    case LOG_OUT: {
      return {
        ...state,
        isLoggedIn: false,
        user: {},
      };
    }
    default:
      return {
        ...state,
      }; // default도 spread 문법을 통해 작성
  }
};

useSeletor 성능 최적화

react-redux의 useSelector를 통해 state를 조회할 때, state 내의 여러가지 상태를 객체형태로 한 번에 조회하는 것 보다는 state 내의 각각의 상태를 나누어 주는 것이 좋다.
왜냐하면 객체형태로 한 번에 state를 조회하면 어떤 한 가지 상태만 변화하여도 그 state를 조회하는 컴포넌트가 모두 리렌더링이 되어 성능에 안좋은 영향을 미칠 수 있기 때문이다.

user = {
  isLoggedIn: false,
  user: {},
};

// 바로 아래처럼 코드를 작성하기 보다는
const { isLoggedIn, user } = useSelector(state => state.user);

// 다음 처럼 하면 최적화 가능
const isLoggedIn = useSelector(state => state.user.isLoggedIn);
const user = useSelector(state => state.user.user);

성능최적화 예시

user state를 useSelector를 통해 조회

import React, { useEffect } from 'react';
import PostForm from '../components/PostForm';
import PostCard from '../components/PostCard';
import { useSelector } from 'react-redux';

const dummyPost = {
  imagePaths: [],
};

const Home = () => {
  const { user, isLoggedIn } = useSelector(state => state.user);
  const { mainPosts } = useSelector(state => state.post);

  return (
    <div>
      {user ? <div>Login: {user.nickname}</div> : <div>Logout!!</div>}
      {isLoggedIn && <PostForm dummyPost={dummyPost} />}
      {mainPosts.map(c => {
        return <PostCard key={`PostCard${c}`} post={c} />;
      })}
    </div>
  );
};

export default Home;

위의 경우보다는 아래의 경우가 더 최적화가 잘 된 것이다.

import React, { useEffect } from 'react';
import PostForm from '../components/PostForm';
import PostCard from '../components/PostCard';
import { useSelector } from 'react-redux';

const dummyPost = {
  imagePaths: [],
};

const Home = () => {
  const user = useSelector(state => state.user.user);
  const isLoggedIn = useSelector(state => state.user.isLoggedIn);
  const { mainPosts } = useSelector(state => state.post);

  return (
    <div>
      {user ? <div>Login: {user.nickname}</div> : <div>Logout!!</div>}
      {isLoggedIn && <PostForm dummyPost={dummyPost} />}
      {mainPosts.map(c => {
        return <PostCard key={`PostCard${c}`} post={c} />;
      })}
    </div>
  );
};

export default Home;