Props
는 개발에서 많이들 사용되는 용어인 프로퍼티(properties)
의 줄임말이다.
props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용된다.
parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용된다.
Props
는 React에서는 사용자가 컴포넌트에 전달해서 보관하길 원하는 데이터이다.
즉, 컴포넌트 내에서 데이터가 보관되면, 이 데이터는 수정되지 않고 보존되어야 하는 법칙이 성립된다. 만약 props의 값을 변경하고자 할 때에는 컴포넌트 내부가 아닌, 부모 컴포넌트에서 이에 대한 부분이 변경되어야 한다.
부모 객체에서는 자식객체에 post라는 데이터를 props 형태로 전달 해 줄수 있다.
이는 부모 객체에서 넘겨주는 데이터이기 때문에, 실제 사용하는 컴포넌트 내에서 props의 변경은 원칙적으로 금지되어 있다.
부모 component에서 자식 component로 값을 전달할 때
// App.js
import React from 'react'
import Hello from './Hello'
function App() {
return (
<>
<Hello name="react" color="red"/>
<Hello color="pink"/>
</>
)
}
export default App;
// Hello.js
import React from 'react'
function Hello({ color, name }) {
return <div style={{ color }}>안녕하세요 {name}</div>
}
Hello.defaultProps = {
name: '이름없음'
}
export default Hello
component tag 사이에 넣은 값을 조회하고 싶을 때 사용
// App.js
import React from 'react'
import Hello from './Hello'
import Wrapper from './Wrapper'
function App() {
return (
<Wrapper>
<Hello name="react" color="red"/>
<Hello color="pink"/>
// Wrapper사이의 Hello 값이 보고싶을 때
</Wrapper>
)
}
export default App
// Wrapper.js
import React from 'react'
function Wrapper({ children }) {
const style = {
border: '2px solid black',
padding: '16px',
}
return (
<div style={style}>
{children}
// {children} 사용
</div>
)
}
export default Wrapper
Component가 생성될 때 갖는 기본값으로, Component 안에서 값을 관리하며, 자식 Component에게 props로 전달할 수 있다.
State
는 컴포넌트 내부에 존재하고 있기 때문에, 상태값 변경이 가능하다는 것이다.
props처럼 부모 컴포넌트가 내려주는 것 말고, 컴포넌트 자신이 어떤 값을 관리하고싶다면 그때는 state를 사용하며 컴포넌트에서 유동적인 데이터를 다룰 때, state 를 사용한다.
React.js 어플리케이션을 만들 땐, state를 사용하는 컴포넌트의 갯수를 최소화 하는 노력을 해야한다.
예를들어, 10 개의 컴포넌트에서 유동적인 데이터를 사용 하게 될 땐, 각 데이터에 state를 사용 할 게 아니라, props 를 사용하고 10 개의 컴포넌트를 포함시키는 container 컴포넌트를 사용하는 것이 효율적이다.
state
예시post
라는 컴포넌트에서 getInitialState
를 통해서 컴포넌트 내에서 쓰일 state
값을 리턴받게 된다. getInitialState
는 return
을 통해 state 초기값
을 반환해 주게 되는데, 이렇게 함으로써 컴포넌트 내부에서는 this.state
를 통해 상태값을 제어할 수 있게 된다.
render 함수
에서는 바로 getInitialState
에서 받은 state값
중, title
을 출력하고 있음을 알 수 있다. 이렇게 초기화된 state값
을 출력할 수 있지만, 중간에 state값
을 바꿔줄 수도 있다.
parent 컴포넌트에 의해 값이 변경 될 수 있는가?
props : "YES" / state : "NO"
컴포넌트 내부에서 변경 될 수 있는가?
props : "NO" / state : "YES"