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 로 받은 데이터를 상태변경할 수 있다.
Share article