4. Redux 상태관리(구조분해할당,useState,props)

박선규

Jul 15, 2025

Contents

Redux Redux 세팅 컴포넌트 만들기 Body 상태 변경 오브젝트 값 상태 변경 props

Redux

🔷 스토어(Store)

Redux에서 애플리케이션의 전체 상태(state)를 보관하는 객체

createStore() 또는 configureStore() 함수를 사용하여 생성함

스토어는 상태를 보관하고, 상태를 읽고, 상태를 변경하는 흐름의 중심 역할을 함

🔷 액션(Action)

상태에 어떤 변화가 필요하다는 의도를 담은 자바스크립트 객체

형식: { type: 'ACTION_TYPE', payload: data }

반드시 type 속성이 있어야 하며, payload는 선택적으로 데이터 전달

🔷 리듀서(Reducer)

현재 상태(state)와 액션(action)을 입력 받아 새로운 상태를 반환하는 순수 함수

형식: (state, action) => newState

이전 상태를 직접 수정하지 않고, 새로운 상태 객체를 반환해야 함 (불변성 유지)

🔷 디스패치(Dispatch)

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

형식: store.dispatch(action)

액션이 디스패치되면 스토어는 해당 액션을 리듀서에 전달하여 새로운 상태를 계산함

🔷 구독(Subscribe)

상태 변화가 발생할 때 리스너(함수)를 실행하도록 등록하는 기능

형식: store.subscribe(() => { ... })

주로 상태가 바뀌었을 때 UI를 업데이트하기 위해 사용

Redux 세팅


npm i react-redux

컴포넌트 만들기

Body.js


import React from 'react';

function Body(props) {
    return (
        <div>
            <div>이름: 서강준</div>
            <div>전화번호: 0101-1111-1111</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;

Body 상태 변경

구조 분해 할당

📌

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


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

const [a,b,c] = arr; // 구조 분해 할당

console.log(a);

📌

배열은 의 각주소에 맞게 새로운 배열인 a,b,c에 각 값을 넣을 수 있다.

useState

📌

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

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

setState : 상태 값을 변경할 때 사용하는 함수. 호출하면 컴포넌트가 다시 렌더링됨.

initialState : 상태의 초기값 (초기 렌더 시 한 번만 사용됨)


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


import React, { useState } from 'react';



function Body(props) {
    const [number, setNumber] = useState("01012345678");
    const changePhone = () => {
        setNumber("01011111111");
    }
    return (
        <div>
            <div>이름: 서강준</div>
            <div>전화번호:{number}</div>
            <button onClick={changePhone}>휴대폰번호 변경</button>
        </div>
    );
}

export default Body;

오브젝트 값 상태 변경

Body2.js


import React, { useState } from 'react';



function Body2(props) {
    const [user, updateUser] = useState({
        name : "서강준",
        number : "01012345678"
    });

    const changeUser = () => {
        updateUser({
            ...user,
            name : "우도환",
            number :  "01023456789"
        });
    }
    return (
        <div>
            <div>이름 : {user.name}</div>
            <div>전화번호 : {user.number}</div>
            <button onClick={changeUser}>사용자 변경</button>            
        </div>
    );
}

export default Body2;

App.js


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




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

export default App;

📌

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

props

📌

props(properties)는 컴포넌트에 전달되는 데이터를 담고 있는 객체다.

주로 부모 컴포넌트 → 자식 컴포넌트로 데이터를 전달할 때 사용한다.

props는 읽기 전용(read-only) 이며, 자식 컴포넌트는 전달받은 props를 직접 수정할 수 없다.

App.js


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




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

export default App;

📌

App.js가 자식 컴포넌트인 Body2.js에 값을 전달한다.

Body2.js


import React, { useState } from 'react';



function Body2(props) {

    const {username, password} = props;

    const [user, updateUser] = useState({
        name : "서강준",
        number : "01012345678"
    });

    const changeUser = () => {
        updateUser({
            ...user,
            name : "우도환",
            number :  "01023456789"
        });
    }
    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) {

    const {username, password} = props;

    const [user, updateUser] = useState({
        name : "서강준",
        number : "01012345678",
        username : username,
        password : password
    });

    const changeUser = () => {
        updateUser({
            ...user,
            name : "우도환",
            number :  "01023456789",
            username : "cos",
            password : "1234"
        });
    }
    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(props) { return ( <div> <div>이름: 서강준</div> <div>전화번호: 0101-1111-1111</div> </div> ); } export default Body;

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

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

import React, { useState } from 'react'; function Body(props) { const [number, setNumber] = useState("01012345678"); const changePhone = () => { setNumber("01011111111"); } return ( <div> <div>이름: 서강준</div> <div>전화번호:{number}</div> <button onClick={changePhone}>휴대폰번호 변경</button> </div> ); } export default Body;

import React, { useState } from 'react'; function Body2(props) { const [user, updateUser] = useState({ name : "서강준", number : "01012345678" }); const changeUser = () => { updateUser({ ...user, name : "우도환", number : "01023456789" }); } return ( <div> <div>이름 : {user.name}</div> <div>전화번호 : {user.number}</div> <button onClick={changeUser}>사용자 변경</button> </div> ); } export default Body2;

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

import React, { useState } from 'react'; function Body2(props) { const {username, password} = props; const [user, updateUser] = useState({ name : "서강준", number : "01012345678" }); const changeUser = () => { updateUser({ ...user, name : "우도환", number : "01023456789" }); } 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) { const {username, password} = props; const [user, updateUser] = useState({ name : "서강준", number : "01012345678", username : username, password : password }); const changeUser = () => { updateUser({ ...user, name : "우도환", number : "01023456789", username : "cos", password : "1234" }); } return ( <div> <div>사용자 : {user.username} 패스워드 : {user.password} </div> <div>이름 : {user.name}</div> <div>전화번호 : {user.number}</div> <button onClick={changeUser}>사용자 변경</button> </div> ); } export default Body2;