[Nomad coders] React_State

State

state

• 변경될 데이터가 저장되는 곳

변수를 JSX에 전달하는 법

<script>
let counter = 0;
    function countUp() { //counter를 증가시키는 함수
      counter += 1;
    }
    const Container = () => (
      <div>
        <h3>Total clicks: {**counter**}</h3>
        <button onCLick={countUp}>Click me</button>
      </div>;
    )
    ReactDOM.render(<Container />, root);
    </script>

=> 이런 코드를 실행할 경우 UI가 업데이트 되지 않아서 counter는 항상 0이다.
=> rerendering 필요

UI update = rerendering

<script>
let counter = 0;
function countUp() { //counter를 증가시키는 함수
  counter += 1;
  render();
}
function render() {
	ReactDOM.render(<Container />, root);
}
const Container = () => (
  <div>
    <h3>Total clicks: {**counter**}</h3>
    <button onCLick={countUp}>Click me</button>
  </div>;
)
**render();**
</script>

=> 변화가 있을 때마다 render
=> 새로운 Container 컴포넌트를 생성하는 것이 아니라 React는 바뀐 부분만 rerendering 함(매우 중요한 기능)

useState

<script>
let [counter, modifier] = React.useState(0);
const onClick = () => {
   modifier(counter + 1); // counter = counter + 1
}
</script>

• counter: 초깃값 설정
• modifier: 변수를 변경하는 함수. rerendering을 자동으로 해줌. 인수에 있는 값으로 업데이트

state를 바꾸는 방법

1. setCounter에 인자로 원하는 값을 넣어주는 방법

<script>
const onClick = () => {
	setCounter(원하는 값);
};
</script>

2. 이전 값을 이용해서 현재 값을 계산하는 방법

<script>
const onClick = () => {
	setCounter(counter + 1);
};
</script>

3. setCounter에 인자로 함수를 넣는 방법

<script>
const onClick = () => {
    setCounter((current) => current + 1);
}
</script>

• 인자로 들어가는 함수의 return 값은 원하는 값