react 컴포넌트 동작원리

react 컴포넌트가 리랜더링이 되는 이유는
props가 바뀌거나 상위 컴포넌트가 리랜더링됐거나 state가 바뀔때 리랜더링이 됩니다.
그럼 리랜더링이 안되는 경우는 어떻할까요?

const a = "1234"

  const clickHandler = () => {
    a("updated")
    console.log(a)
  }

return(
<button onClick={clickHandler}>Change Title</button>
)

라고 할경우 버튼을 클릭했을때 a는 바뀔까요??

결과는 a는 바뀌지만 리렌더링이 되지 않았기 때문에 화면에 보이는 a는 바뀌지 않습니다.
그 결과로 console에는 updated가 찍히지만 화면은 나오지 않는것을 알 수 있죠

그럼 어떻게 해야 리렌더링을 하게 해서 화면을 바꿀 수 있을까요?
또 리렌더링이란 무엇일까요?
일단 리렌더링은 사용자가 화면에 뷰를 다시 새롭게 보여주는것을 말합니다.
또한 컴포넌트는 예전에는 class를 썼지만 요즘은 함수형으로 많이 사용하기 때문에
함수형으로 설명하자면 함수를 재호출하여 변화된것을 보여주는 것인데, 이 과정에서
그냥 const로 짜게 될 경우 리액트는 변화를 감지하지 못해서 리렌더링을 못하게 됩니다.
그럼 리렌더링을 하기 위한 방법은 뭐가 있을까요?
대표적으로는 state가 있습니다. state를 이용하여

const [a,setA] = useState("1234")

  const clickHandler = () => {
    setA("updated")
    console.log(a)
  }

return(
<button onClick={clickHandler}>Change Title</button>
)

위의 코드 처럼 바꾼다면 리렌더링이 실행 될것입니다.
state를 바꿀때는 구조,분해,할당을 이용하여 2번째에 있는 setA를 이용하여 바꿔야지 리렌더링이 실행 됩니다.
그리고 처음 랜더링이 되는것을 마운트 되었다고 합니다.