[React] State와 Props
리액트의 State
리액트의 장점은 UI 내에서 데이터가 변경된 부분만 업데이트 해준다는 것이다.
리액트에 데이터를 저장시켜서 자동으로 리렌더링을 시킬 수 있다.
state는 app 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체로, 컴포넌트 안에서 관리된다.
이를 통해, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜 편의성을 높일 수 있다.
동적인 데이터를 다룰 때 사용한다.
리액트로 데이터를 저장하려면 React.useState() 를 사용할 수 있으며 괄호 안에 초기값을 지정해줄 수 있다.
const [] = React.useState()
저장된 데이터를 확인해보면, 배열의 형태로 저장된 것을 확인할 수 있다.
[ data, modifier ]
data : 저장되는 값
modifier : 데이터를 수정하고, 컴포넌트를 새로 불러오는 함수
이 modifier 함수를 값을 업데이트하고 리렌더링을 일으키게 작성해준다면,
render 함수를 굳이 여기저기서 호출하지 않고도 리렌더링을 시킬 수 있다.
그리고 변수명을 직접 사용해서 업데이트를 하는 것보다 현재 상태 (current)를 업데이트 하는 것이 더 좋다.
왜냐하면 나중에 코드가 복잡해지면 해당 변수가 여기저기서 업데이트 되어 버그가 발생할 수도 있기 때문이다.
아래 코드는 이전 포스팅에서 만든 버튼을 state를 사용하는 방식으로 만든 코드이다.
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
// modifier : 값 업데이트 및 리렌더링
// setCounter(counter + 1);
setCounter((current) => current + 1);
};
return (
<div>
<h3>Total clicks : {counter}</h3>
<button onClick={onClick}>click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>리액트의 Props
props : 부모 component가 자식 component에게 주는 값이며, 자식 component는 받아오기만 할 뿐 직접 수정할 수 없다.
(state는 값을 변경할 수 있다.)
특정한 세팅을 해놓고 그것을 불러와서 쓰고 싶다면, 함수형 컴포넌트를 만들면 된다.
함수 형태로 컴포넌트를 만든 후, 사용하고 싶은 곳의 태그에 property를 부여해주면 된다.
아래와 같이 사용할 수 있다.
<script type="text/babel">
//함수형 컴포넌트 : JSX를 반환하는 함수
//만들고 사용하는 모든 컴포넌트들은 ()로 argument를 받음
//버튼 설정을 넘겨주는 컴포넌트
function Btn({ text, changeValue }) {
//props : Btn이 받는 유일한 인자
//props 안에 text, changeValue가 포함됨
return (
<button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: "none",
borderRadius: 30,
}}
>
{text}
</button>
);
}
function App() {
const [value, setValue] = React.useState("1");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<Btn text={value} changeValue={changeValue} />
<Btn text="2" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>