[TIL]21.05.03

React에서의 props와 state란?

props(property of component)
: Props 외부로부터 전달 받은 값, 변하지 않는 값(함부로 변경되어서도 안되는 값들), 상위 컴포넌트로부터 전달받은 값 like 성별, 이름(익숙한 사고방식에 한해)

객체 형태이며 읽기전용이다.
EX)

const setName = (props) => {
	<h1>{props.name}</h1>
	<div>{props.content}</div>
}

Export default const App = () => {
	<setName name='CAELIN' content='missin u'/>
}

State(상태란 뜻..)
: 컴포넌트 내부에서 변할 수 있는 값(like 사는 지역, 줄어드는 텅장등등..)

useState를 사용해서 state변수를 선언할 수 있음, state변수는 React에 의해 함수가 끝나도 사라지지 않음.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

import useState from 'Reate'; 
const [content, setContent] = useState(0);


const handleContent = (e) => {
	setContent(e.target.value);
}
const handleButtonClick = (e) => {
	alert(value);
}

const App = () => {
	<input type="text" onChange{handleContent}></input>
	<button onClick={handleButtonClick}>Button</button>
}

Export default App;

이런식으로 이벤트핸들러를 이용하여 state의 값을 변경할 수 있다.

이렇듯 React는 상태에 해당하는 데이터를 state로 따로 관리하고 싶어한다, React가 state를 통제할 수 있는 컨포넌트를 Controlled Component라고 한다.

이러한 React 단방향 데이터 흐름(one-way data flow)을 중요시 여긴다. 자식컴포넌트가 부모컴포넌트의 state나 데이터를 사용할 수 있다. 이러한 위에서 아래로 물흐르듯 데이터가 흐른다하여 단방향 데이터 흐름이라 불린다. 그리고 컴포넌트들끼리의 데이터가 각각 중복된다면 부모컴포넌트를 하나 만들고 그 부모에 데이터가 중복되는 자식 컴포넌트들을 둬서 단방향 데이터 흐름을 이용해 상태(state)가 자식컴포넌트들끼리 중복되지 않고, 부모 컴포넌트에서 가져와 사용할 수 있도록 하는 것이 좋다.