State

• 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다. 
• 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것이었다.
  하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴때 state라는 것을 사용한다.
• 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. 
• 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다.

• 간단하게 생각하면 State는 변수
• State는 일반 변수와 다르게 값이 변하게 되면 렌더링이 일어난다.
  • 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링이되어 화면이 바뀌게 됨

state와 함께 사용되는 함수는 setState이다. setState는 state 값을 변경시켜주는 함수이다.

const [state, setState] = useState(초기값)

Props

- 프로퍼티, props(properties의 줄임말) 라고 한다.
- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.)
- 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

사용법

import React from 'react';
function Main(props) {
    return (
        <div>
            <main>
                <h1 style={{color: props.color}}>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}
export default Main;
/*---------------------------------------------------------------------------*/
import React from 'react';
function Main({name, color}) { // props 대신 비구조화 할당
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}
export default Main;

리렌더링 발생 조건

Props 변경 (=> properties의 줄임말)

Props 업데이트가 일어나면 리렌더링을 한다.
Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다.

부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고,
모든 하위 컴포넌트에 대해 리렌더링이 발생한다.

State 변경

State 업데이트가 일어나면 리렌더링을 한다.

리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다.
리액트는 변화를 바로바로 감지하여 화면에 변경사항을 보여주기 때문이다.

부모 컴포넌트 렌더링

부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한다.
Props와 같은 원리이다.

TIP

위와 같은 상황에서 리액트는 리렌더링 된다 하지만 지나친 리렌더링은 성능을 악화시킴으로 리렌더링을 필요할 대만 작동하게 함으로써 성능 최적화 작업을 해줄수 있다.

회고

220722 ~ 220728
일주일이 지났다
지금의 심경은 뭐랄까 내가 바보인가? 시간이 부족한가? 열심히 했는가? 변명거리만 찾고있는듯 하다
지금은 220801 01시 시간은 어느정도 흘렀지만 이해도는 100%라고 말은 할 수 없다.
반성한다 매우
Todo List 과제는 꾸역꾸역 제출은 했다
처음에는 자신만만 했지만 시간이 지날수록 식은땀이 났었다
뭐가 부족해서 이렇게 힘들어 했을까
공부를 시작하기전에는 씹어먹겠다 라고 생각을 했었다
피곤해서일까? 공부하고있다는 안도감일까? 뭘까?
그냥 고쳤다는 습관인 '일단 뭐든지 미룬다' 인것 같다
이틀전에 몇명이서 남아서 이런저런 얘기를 했다
누군가가 누군가에게 너는 열심히 하고있어서 다른사람이 보기에는 참 좋은 자극제가 될것이라고 했다
이얘기를 들으면서 곰곰이 생각을 해봤는데 나는 아무것도 없더라
그래서 진심으로 주위를 둘러보았다
솔직히 처음에는 나보다 조금 부족한 실력인 사람들이 몇몇 보였다
근데 지금은 나보다 뭔가 더 앞서 나가는 것이 보이더라
아차! 라는 생각과 함께 나는 그 사람을 나의 자극제로 삼기로 했다
이 생각이 며칠이나 갈지는 잘 모르겠다
하지만 아직까진 자극이 잘 되고있다
이 자극이 풀리면 어떡하지 라는 생각이 너무나 들지만 그건 그때가서 다시 생각해보기로 해보자
일단은 달리자