Chapter3 - State 관리

단방향 데이터 흐름이란?

데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다는 소리이다.

 

왜 단방향으로 써야하지?

라이프 사이클과 함께 생각해보면 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다. 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각하고, 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 될것이다. 그리고 또 자식 컴포넌트가 리렌더링 되며 반복될 것이다. 

 

 

네모 만들기

 

클래스형 컴포넌트

App.js 

import React from "react"; class App extends React.Component{   constructor(props){     super(props);     this.state = {       count: 3,     };   }   componentDidMount(){   };   addNemo = () => {     this.setState({count: this.state.count + 1});   }   removeNemo = () => {     if (this.state.count > 0){  //if문으로 마이너스까진 가지 않도록 작성       this.setState({count: this.state.count -1});     } else {       window.alert("네모가 없어요!")     }   }   render(){     const nemo_count = Array.from({ length: this.state.count }, (v, i) => 1);    console.log(this.state)     return (       <div className="App">         {nemo_count.map((n, i) => {           return (             <div             key={i} //key 값을 정해놓으면 콘솔창에 오류가 나지 않는다.             style={{               width: "150px",               height: "150px",               backgroundColor: "#ddd",               margin: "10px",             }}>               nemo             </div>           )         })}         <div>           <button onClick={this.addNemo}>하나 추가</button> {/*또는 onClick={() => {this.addNemo();}}로 쓸수 있다.*/}           <button onClick={this.removeNemo}>하나 빼기</button>         </div>       </div>     );   } } export default App;

 

 

함수형 컴포넌트

 

App.js

import React from "react"; import Nemo from "./Nemo"; class App extends React.Component{   constructor(props){     super(props);     this.state = {       count: 3,     };   }   componentDidMount(){   };   render(){       return (       <div className="App">         <Nemo />       </div>     );   } } export default App;

Nemo.js

import React from "react"; const Nemo = (props) => {   const [count, setCount] = React.useState(3); console.log(count)   const nemo_count = Array.from({ length: count }, (v, i) => i);   const addNemo = () => {     setCount(count + 1);   }   const removeNemo = () => {     if (count > 0){       setCount(count - 1);     } else {       window.alert("네모가 없어요!")     }   }   return (     <> {/*오류를 없애주기 위해서 빈 태그로 감싸줌 */}     {nemo_count.map((n, i) => {       return (         <div         key={i} //key 값을 정해놓으면 콘솔창에 오류가 나지 않는다.         style={{           width: "150px",           height: "150px",           backgroundColor: "#ddd",           margin: "10px",         }}>           nemo         </div>       )     })}     <div>       <button onClick={addNemo}>하나 추가</button> {/*또는 onClick={() => {this.addNemo();}}로 쓸수 있다.*/}       <button onClick={removeNemo}>하나 빼기</button>     </div>     </>   ) } export default Nemo;

 

결과물은 같다!