State
State
What is State?
State란 data가 저장되는 장소를 말한다.
쉽게 말해 State, 즉 상태를 저장하고 있는 놈이다.
그런데, 우리는 State 없이도 충분히 데이터를 저장할 수 있다.
간단하게 알아보자.
let counter=0;
functinon CounterUp(){
counter++;
}
당연히 CounterUp()함수가 호출되면 counter가 1씩 증가한다.
그런데 뭐가 불편하길래 굳이 React는 State라는 개념을 만든걸까?
만일 count값을 단순히 코드내에서 증가시키는 것에 그치지 않고, 이 증가된 counter값을 HTML에 반영하도록 해보자.
그렇다면 위의 코드는 아래와 같이
let counter=0;
functinon CounterUp(){
counter++;
render(); // 추가된 함수
}
바꾼 값을 바탕으로 다시 화면에 그려주는 리렌더링을 하는 동작을 추가해야한다.
바로 이게 State가 필요한 이유이다.
일반 Data의 값을 변경하면 수동으로 리렌더링 해야하지만, State값을 변경하면 자동으로 리렌더링된다.
따라서 값을 바꿀떄마다 render()함수를 다시 적어주어야 하는 수고를 덜어주는 고마운 개념이라 할 수 있다.
그리고, 심지어 React는 똑똑하기 때문에 정확하게 이전의 화면과 비교하여 변화가 필요한 부분만 리렌더링해준다.
이는 React가 왜 interactive에 최적화 되었는지의 이유를 알게 해준다.
How to use State?
state를 이용하기 위해서는 React.useState()함수를 이용하면 된다.
const [data,modifier]=React.useState(initvalue);
React.useState()의 인자 값에는 state의 초기값을 설정해줄 수 있고, 반환값은 배열을 반환한다.
반환되는 배열은 [값, 함수]로 이루어져 있는데 이를 위 코드처럼 data와 modifier에 담자.
data는 state의 값, modifier는 data를 조작할 수 있는 함수이다.
아래의 두 코드는 동일한 의미이다.
// 일반적인 변수
let counter=0;
function setCounter(x){
counter=x;
render();
}
// state 사용
const [counter,setCounter]=React.useState(0);
딱 봐도 데이터와 그 데이터를 설정해주는 함수를 한 줄에 선언해줄 수 있는 state를 사용한 코드가 간결할 뿐만 아니라, 변수의 값이 바뀌면 자동으로 리렌더링까지 된다는 점에서 state를 이용하지 않을 이유가 없다.
state를 이용한 전체 코드를 살펴보자,.
<script type="text/babel">
const root=document.getElementById("root");
function App(){
const [counter,setCounter]=React.useState(0);
const onClick=()=>{
setCounter(counter+1);
//render();가 필요없다. modifier인 setCounter에 의해 state인 counter가 변화하면 자동으로 App()를 리렌더링 한다.
}
return(
<div>
<h3>Total clicks : {counter}</h3>
<button onClick={onClick}>Click</button>
</div>
)
}
ReactDOM.render(<App/>,root);
</script>
modifter에 의해 data가 바뀔때마다 자동으로 Component를 re-rendering하고, React는 딱 변화가 필요한 부분만 UI를 업데이트 해준다.
그리고 state를 바꾸는 2가지 방법을 알아보자.
위의 예제처럼 우리는 이전의 값을 바탕으로 새로운 값을 계산해야하는 경우가 많다.
그럴 때는 아래와 같이 2개의 방법이 있는데,
setCounter(counter+1); // 위에서 한 방식, 비추천
setCounter((current)=>current+1); // 추천하는 방식
지금처럼 간단한 코드에서는 뭐를 사용해도 상관이 없지만, 복잡한 웹사이트를 만들며 counter가 여러 곳에서 갱신된다면, 아래의 함수가 안전하다.
(current)는 현재의 값이라는 것을 보장하기 때문.
같은 자원을 여러 곳에서 접근할 때 문제가 발생하는 것 같은데, 자세한건 직접 프로젝트 만들며 부딪혀 봐야지 알 것같다.
Grammar of JSX
JSX에 작성할때, html과 다른점에 유의해야 한다.
속성 이름을 쓸때 유의해야하는데,
HTML의 label의 for속성은 JSX에서는 htmlFor로 써야하고
HTML의 class속성은 JSX에서 className으로 써야한다.
왜냐하면 JSX는 JS, HTML을 다 다루기 때문에 예약어가 겹치면 안되기에 구분이 필요하기 때문
그리고 JSX는 중괄호{} 안에 변수, 함수, 조건식 등을 전달할 수 있는데,
<input value={amount}></input>
<input onChange={onChange}></input>
<input value={enabled ? amount:0}></input>
위와 같은 코드들은 전부 가능하다.
JS가 되는 HTML이라니, 너무 편하다.
Review
- state를 통해 변수를 관리하면 변수의 값이 바뀔 때마다 자동으로 Component가 re-rendering된다.
- React는 겁나 똑똑하기 때문에 그 re-rendering된 것 중에서 딱 필요한 만큼만 UI로 update한다.
- 이런데도 vanillia JS 쓰는 흑우 없제?
Leave a comment