오늘은 조금 걱정이 들었다. 코드를 이해하는데도 수업 이후에 이렇게나 오랜 시간이 필요하고 겨우 코드 흐름을 이해했다 싶어도 막상 내가 짤 수 있을지 걱정스러웠다. 걱정한다고 짤 수 있게 되는 것도 아니고.. 우선은 하루하루 조금씩이라도 코드를 이해하도록 노력중이다. 도와주신 회고조 팀원분이 리액트 공식 문서랑 짧게라도 자바스크립트 코테 한 문제씩이라도 풀면 좋을 것 같다고 조언해주셨다.
특히 오늘은 회고를 진행했는데도 헷갈리는 부분이 많았다..
내일보다는 그래도 오늘의 내가 낫다고 생각하자!!
사용할 때는
import React, {useState} from 'react';
const [ 현재 상태값 변수, 상태값을 갱신해주는 Setter 함수] = useState(상태의 초깃값)
형태로 들어간다. 식에서 isPlaying의 값에 따라 상태가 바뀌는 것을 알 수 있다.
이벤트는 handleStart와 handlePause라는 이벤트 두 개가 handleToggle을 이루고 있다는 것을 알 수 있다. 언제나 새로운 다음 상태값을 성정해줘야 하고, 상태 변경 요청이 왔을 때는 리액트 UI 랜더링이 이루어진다.
고양이의 나이를 따로 계산하여 새로운 배열을 생성했다. newCat은 age 가 포함된 고양이 배열 중 두 번째 배열을 의미한다. 두 번째 cat은 age를 가지고 있는 새로운 고양이 객체이다.
위와 같은 State 함수를 사용했다. 다만 CatsList 라는 함수에 넣어 사용했다. 직접 수정이 불가능하기 때문에 상태 함수를 사용한다고 생각하자.
이벤트를 담당하는 함수들이다. deleteCatId 와 일치하는 부분이 있으면 그것을 삭제한 객체를 리턴하는 함수이다. handleAddCat은 랜덤 아이디가 들어간 newCat와 남은 데이터가 상태 변경 함수로 들어간다. Increase와 Decrease 도 마찬가지로 updateCatid와 같다면 증가하고, 아니라면 그냥 cat이 들어간다. Decrease는 반대로 1이 감소된 상태로 들어가거나 아니라면 원래 cat 객체가 들어간다.
회고조 명종님이 주신 그림판 이미지로 먼저 이해를 했다. abc라는 문자열을 넣고 버튼을 누를 때마다 변하는 코드를 짠다고 가정하자. abc와 abc의 상태를 변하게 하기 위해서는 useState 함수가 필요하다. 그렇기 때문에 abc와 useState 함수가 동시에 들어와야 문자열을 변경할 수 있다. 그래서 useState 함수를 abc와 같이 props 로 넣어줘야 하는 것이다.
컴포넌트 외부에서 전달받은 데이터
컴포넌트 내부에서 읽기만 가능(read only, 수정 할 수 없는)
컴포넌트 내부에서 속성으로부터 파생된 상태를 만들어 사용하는 것도 가능 (주의!)
console.log({ onChangeMessage });
이렇게 안에서 prop을 변경하려고 하면 읽기 전용이기 때문에 이뤄지지 않는다. 그러면 부모의 상태를 변경할 수 있는 업데이트 함수를 prop 으로 자식에게 전달을 해줘야 한다. 자식은 전달받은 업데이트 함수(참조)를 실행하게 된다.
결과적으로 부모 내부에 있는 업데이트 함수가 실행되고 부모의 상태를 바꾸게 된다. 그러면 부모가 다시 그려지고 자식도 다시 그려지게 된다. (prop이 변경된다.)
결론: 상태를 변경할 때는 변경 함수가 필수적이라고 생각하면 된다. 특히나 무조건 변경해야 할 문자열과 상태 변경 함수를 같이 넣어주는 것처럼 변경 함수 넣어주는 것을 잊지 말자!