211110 리액트 입문 속성값과 상태값

UI 데이터를 속성값이나 상태값으로 관리해야함

#상태값

let color = 'red';

export default function App(){
function change(){
	color = 'blue';
}

return (
<button style={{backgroundColor:color}} onClick={onCLick}>
	좋아
</button>
)
}

// 변경되지 않는다, color가 변경됨을 리액트가 모르기 때문.

따라서 값을 변경을 알게 하기위해선

//0. 
import React, {useState} from 'react';
//1.
const [color, setColor] = useState('red')
/로 초기화
//2. setColor 함수로 변경
function change(){
setCoor('blue');
}

#속성값

export default function title(props){
}

export default function title({title}){
}

=> {title} 이라는 비구조화 문법을 사용하면 props.XX로 접근할 필요가 없어서 편하다


import Title from './Title'
타이틀이라는 컴포넌트를 가져올건데

export default function Count(){
  export [count, setCount] = ~
  function onClick(){
      setCount(count+1);
  }

  return (
    <div>
      <Title title={`현재 카운트:${count}`} />
      <button onClick={onClick}>증가</button>
    </div>
  )
}

...

import Count from './Counter';

export default function App(){
  const [color, setColor] = useState('red');
  function onClick(){
	  setColor('blue');
  }

  return (
    <div>
	    <Counter />
    </div>
  )
}

증가버튼을 누르면 title이 변경됨
부모컴포넌트가 렌더링될 때마다  자식도 렌더링됨.
이때 자식 속성값이 변하지 않았으면 굳이 새로 변경시킬 필요가없다

ex) 다음과같은 경우

export defulat function Count(){
  export [count, setCount] = ~
  export [count2, setCount2] = ~
  function onClick(){
 	 setCount(count+1);
  }
  function onClick2(){
 	 setCount2(count2+1);
  }
  return (
    <div>
      <Title title={`현재 카운트:${count}`} />
      <Title title={`현재 카운트2:${count2}`} />
      <button onClick={onClick}>증가</button>
      <button onClick={onClick2}>2증가</button>
    </div>
  )
}

위와 같은 상황에서 button2를 클릭할때 부모 컨테이너도 새로 렌더링되고 있다.

이를 방지하기 위해서는 React.memo를 사용할 수 있다.

function Title({title}){
	return (<p> {title}</p>)
}
export default React.memo(title);

-> title 속성값이 변경될때만 새로 그리게 된다.


# 같은 컴포넌트를 여러번 사용할수도 있는데, 각 컴포넌트는 각각 자신만의 상태값을 가진다.

<Count />
<Count />

#속성 값은 불변변수지만 상태값은 불변변수는 아니다.
다만, 상태값도 불변변수로 관리하는 것이 좋다.


#속성값은 왜 불변인가?
 자식comp에 전달되는 속성은 상위component에서 관리하기 때문이다.

XXXX
function Title(props){
props.title = "변경불가"
}
XXXX



#변경을 위해선 상위컴포넌트에서 변경시켜야한다!

만약 이러면 어떨까

export default functio n Counter(){
  count [count, setCount] = useState({value:0});
  function onClick(){
      count.value += 1; //값을 직접 수정
      setCount(count);
  }

  return (<div><<button onClick={oClick}>{`카운트:${count.vluae}`}</button></div>)
}

=> count를 변경해도 리액트가 변경여부를 알지 못한다.
count는 객체인데, 객체의 참조값은 변하지 않고 속성값만 변경하면
동일 참조 객체이기때문에 변경되지않았다고 보는것.

# 그러면 어떻게 해야댐!? 불변변수로 관리하면 되고, 전개연산자를 사용하면 된다!

function onClick(){
	setCount( {...count, value: count.value +1 });
}