[React] Redux 상태 관리

류재성

Jul 06, 2024

Contents

1. Redux 란?2. Body 컴포넌트 만들기 3. Body 상태 변경하기 4. 오브젝트 값 상태 변경 5. props

1. Redux 란?

💡

Redux는 JavaScript 애플리케이션의 상태 관리를 돕는 라이브러리이다.

스토어(Store):

애플리케이션의 모든 상태(state)를 보관하는 객체

createStore 함수를 사용하여 스토어를 생성한다.

액션(Action):

상태에 변화를 일으키는 이벤트를 의미한다.

자바스크립트 객체 형태로 { type: 'ACTION_TYPE', payload: data }와 같은 구조를 가진다.

리듀서(Reducer):

액션을 처리하여 새로운 상태를 반환하는 함수이다.

(state, action) => newState 형태로 작성된다.

디스패치(Dispatch):

액션을 스토어에 전달하는 함수이다..

store.dispatch(action) 형태로 사용된다.


npm i react-redux

Redux 설치를 완료하였다.

2. Body 컴포넌트 만들기

Body.js 파일을 만든다.

Body.js


import React from 'react';

function Body() {
    return (
        <div>
            <div>이름 : 홍길동</div>
            <div>전화번호 : ("01022223333")</div>
        </div>
    );
}
export default Body;

App.js


import './App.css';
import Header from './components/Header';
import Body from './components/Body';

function App() {
  return <div>
    <Header />
    <Body />
    </div>
}

export default App;

현재 헤더와 바디로 이루어져 있다.

3. Body 상태 변경하기

3.1 구조 분해 할당

💡

구조 분해 할당(Destructuring Assignment)은 객체나 배열의 속성을 쉽게 추출하여 변수에 할당하는 편리한 문법이다.


const arr = [1,2,3]; // 배열은 0 번지의 주소를 가지고 있음. 그래서 배열에 추가가 되도 0번지의 값이 안바뀌는거임

const [f,s,t] = arr; // 구조 분해 할당  

console.log(s) ;

배열 arr 을 [f,s,t] 에 각각 할당할 수 있다.

3.2 useState 사용하기

💡

useState 는 React의 훅(Hook) 중 하나로, 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해준다. 상태는 컴포넌트에서 동적인 데이터를 관리하는 데 사용되며, 컴포넌트가 리렌더링되어야 할 때 상태가 변경된다.

state : 현재 상태 값을 나타내는 변수

setState : 상태 값을 업데이트하는 함수

initialState : 상태의 초기 값을 지정

Body.css


import React, { useState } from 'react';

function Body() {
    const [number,setNumber] = useState("01022223333");
    const changeNumber = () =>{
        setNumber("01033334444");
    }

    return (
        <div>
            <div>이름 : 홍길동</div>
            <div>전화번호 : {number}</div>
            <button onClick={changeNumber}>전화번호 변경</button>
        </div>
    );
}
export default Body;

💡

const [number,setNumber] = useState("01022223333"); 이렇게 구조 분해 할당으로 데이터를 넣는다. number에 매개변수가 들어가고 setNumber를 통해 상태를 변경한다.

onClick 함수가 실행되면 number 변수가 setNumber 값으로 변경된다.

4. 오브젝트 값 상태 변경

Body2.js


import React, { useState } from 'react';

function Body2() {
    const [user,setUser] = useState({
        name :"홍길동",
        number : "01022223333"
    });
    const changeUser = () => {
        setUser({
            ...user,
            name :"임꺽정",number:"01033334444"
        });

    };
    
    return (
        <div>
            <div>이름 : {user.name}</div>
            <div>전화번호 : {user.number}</div>
            <button onClick={()=>changeUser()}>전화번호변경</button>    
        </div>
    );
}
export default Body2;

App.js


import './App.css';
import Body from './components/Body';
import Body2 from './components/Body2';
import Header from './components/Header';


function App() {
  return (
  <div>
    <Header />
    <Body />
    <Body2 />
  </div>
)}

export default App;

💡

전개 연산자를 사용해 오브젝트의 값을 변경할 수 있다.

5. props

💡

React에서 props(properties의 약어)는 컴포넌트에 전달되는 데이터를 나타내는 객체이다. props를 사용하면 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 수 있다 props는 읽기 전용이며, 자식 컴포넌트는 전달받은 props를 변경할 수 없다.

App.js


import './App.css';
import Body from './components/Body';
import Body2 from './components/Body2';
import Header from './components/Header';


function App() {
  return (
  <div>
    <Header />
    <Body />
    <Body2 username={"ssar"} password={"1234"} />
  </div>
)}

export default App;

부모 컴포넌트인 App.js 에서 값을 전달받는다.

Body2.js


import React, { useState } from "react";
function Body2(props) {

  let {username,password} = props; // 구조 분해 할당


  const [user, setUser] = useState({
    name : "홍길동",
    number : "01022223333"
  });
  const changeUser = () => {
    setUser({...user,name:"임꺽정",number:"01033334444"});
  };
  return (
    <div>
      <div> 유저네임 : {username} 패스워드 :{password}</div>
      <div>이름 : {user.name}</div>
      <div>전화번호 : {user.number}</div>
      <button onClick={()=>changeUser()}>전화번호변경</button> 
    </div>
  );
}
export default Body2;

Body2.js


import React, { useState } from "react";
function Body2(props) {

// props 로 받은 데이터를 구조 분해 할당으로 담는다.
  let {username,password} = props; 

  const [user, setUser] = useState({
    name : "홍길동",
    number : "1234",
    username : username,
    password : password
  });
  const changeUser = () => {
    setUser({...user,name:"임꺽정",number:"01033334444",username:"cos",password:"5678"});
  };
  return (
    <div>
      <div> 유저네임 : {user.username} 패스워드 :{user.password}</div>
      <div>이름 : {user.name}</div>
      <div>전화번호 : {user.number}</div>
      <button onClick={()=>changeUser()}>전화번호변경</button> 
    </div>
  );
}
export default Body2;

props 로 받은 데이터를 상태변경할 수 있다.

import React from 'react'; function Body() { return ( <div> <div>이름 : 홍길동</div> <div>전화번호 : ("01022223333")</div> </div> ); } export default Body;

const arr = [1,2,3]; // 배열은 0 번지의 주소를 가지고 있음. 그래서 배열에 추가가 되도 0번지의 값이 안바뀌는거임 const [f,s,t] = arr; // 구조 분해 할당 console.log(s) ;

import React, { useState } from 'react'; function Body() { const [number,setNumber] = useState("01022223333"); const changeNumber = () =>{ setNumber("01033334444"); } return ( <div> <div>이름 : 홍길동</div> <div>전화번호 : {number}</div> <button onClick={changeNumber}>전화번호 변경</button> </div> ); } export default Body;

import React, { useState } from 'react'; function Body2() { const [user,setUser] = useState({ name :"홍길동", number : "01022223333" }); const changeUser = () => { setUser({ ...user, name :"임꺽정",number:"01033334444" }); }; return ( <div> <div>이름 : {user.name}</div> <div>전화번호 : {user.number}</div> <button onClick={()=>changeUser()}>전화번호변경</button> </div> ); } export default Body2;

import './App.css'; import Body from './components/Body'; import Body2 from './components/Body2'; import Header from './components/Header'; function App() { return ( <div> <Header /> <Body /> <Body2 /> </div> )} export default App;

import React, { useState } from "react"; function Body2(props) { let {username,password} = props; // 구조 분해 할당 const [user, setUser] = useState({ name : "홍길동", number : "01022223333" }); const changeUser = () => { setUser({...user,name:"임꺽정",number:"01033334444"}); }; return ( <div> <div> 유저네임 : {username} 패스워드 :{password}</div> <div>이름 : {user.name}</div> <div>전화번호 : {user.number}</div> <button onClick={()=>changeUser()}>전화번호변경</button> </div> ); } export default Body2;

import React, { useState } from "react"; function Body2(props) { // props 로 받은 데이터를 구조 분해 할당으로 담는다. let {username,password} = props; const [user, setUser] = useState({ name : "홍길동", number : "1234", username : username, password : password }); const changeUser = () => { setUser({...user,name:"임꺽정",number:"01033334444",username:"cos",password:"5678"}); }; return ( <div> <div> 유저네임 : {user.username} 패스워드 :{user.password}</div> <div>이름 : {user.name}</div> <div>전화번호 : {user.number}</div> <button onClick={()=>changeUser()}>전화번호변경</button> </div> ); } export default Body2;