[TIL] 내배캠4기-React-52일차

오전

• 리덕스 강좌 유튜브 영상 보기

• 리덕스 흐름 복습하기

• 유데미 섹션 3

오후

• 유데미 섹션 4, 10

---

선언형 프로그래밍

React.js에서는 선언형 자바스크립트 코드로 작성해야 한다.
여기서 선언형이라 하믄 무엇을 나타내는 건지 선언만 해주면 브라우저가 대신 그려준다는 의미다.

즉, 화면에 무엇이 표시되어야 하는지를 정의하고 React가 거기까지 도달하는 방법을 알아내도록 만들어야 한다.

이벤트 핸들러 이름

유데미 강의를 듣다가 이벤트 핸들러 함수 이름 짓기에 대한 권장사항을 언급해서 한번 정리해보려 한다.

onClick 이벤트 핸들러라면 clickHandler
해당 이벤트가 트리거되는 메소드 이름으로 시작해서
Handler로 끝나도록? 해주는 것을 강요x 권장하더라.
물론 개인의 자유이지만 이런 규칙을 가지고 만들면 헷갈릴 일이 줄 것 같다.

이전 State에 의존하는 State 업데이트

투두리스트에서 입력받은 제목과 내용을 state에 업데이트 시켜줘야 한다.
원래는 하나씩 독립적인 state를 만들어줬는데, 다른 방법도 있다고한다!

const [userInput, setUserInput] = useState({
	title: '',
	content: '',
 })

이건

const [title, setTitle] = useState('');
const [content, setContent] = useState('');

와 같다.

무엇을 쓰던 자유 << 독립 state로 두는게 편한 것 같기도 하구..

다만 하나의 State로 관리해주면 이전 상태의 스냅샷(오래됐거나 잘못된 스냅샷)을 가져오는 불상사가 생길 수 있어 주의해야 한다.

좀 더 안전한 방법

const titleChangeHandler = (event) => {
setUserInput((prev)=>{
	return {...prev, title: event.target.value};
 });
 }

이렇게 setState함수 안에 화살표함수를 써주면 항상 최신 상태의 스냅샷을 가져온다고 한다.

근데 벌써... 프로젝트 발제라구요..? 하아...