props vs state

props와 state를 별 생각없이 활용해오던 편이었는데 둘의 차이를 생각해보자.

props가 컴포넌트를 외부에서 정의하고 사용하는 것이라고 한다면 state는 컴포넌트 내부에서 props를 가공해서 논리적인 처리를 하는 것이다. 따라서 state는 외부에 정보가 노출되지 않고 은닉된다. 또, state를 props로 전달하여 활용할 수도 있다.

state는 다음과 같이 활용한다. Subject와 Nav컴포넌트의 props로 state 값을 전달하였다. 이제 해당 컴포넌트 내부에서 this.props로 state 값을 활용할 수 있다.

import React from "react"; import Subject from "./Subject"; import Nav from "./Nav"; import Contents from "./Contents"; class App extends React.Component { constructor(props) { super(props); this.state = { subject: { title: "WEB", sub: "web programming" }, contents: [ { id: 1, title: "HTML", desc: "HTML is..." }, { id: 2, title: "CSS", desc: "CSS is..." }, { id: 3, title: "JS", desc: "JS is..." } ] }; } render() { return ( // state 값을 Nav 컴포넌트의 props로 넘겨줌 ); } } export default App;

Nav 컴포넌트의 props로 state값을 넘겼으니 this.props을 통해 해당 정보를 사용할 수 있게 되었다.

class Nav extends React.Component { render() { const data = this.props.data; return data; } }

from http://darrengwon.tistory.com/163 by ccl(A) rewrite - 2020-03-17 20:54:18