TIL - 21.07.12 👨‍💻

state 판별

1. 부모로부터 props를 통해 전달되는지 확인.
2. 시간이 지나도 변하지 않는지 확인.
3. 컴포넌트 안 다른 state나 props로 계산 가능한지 확인.

위 세가지 보기 중 하나라도 해당하면 state로 사용하기에 무리가 있다.

---

props 추가

state는 컴포넌트 내부에서 변할 수 있는 값이고,
props는 외부(상위 컴포넌트)로 부터 전달 받은 값이다.

---

props의 특징

1. 이름과 성별같이 변하지 않는 값에 사용하는 외부(상위 컴포넌트)로 부터 전달 받은 컴포넌트의 속성을 의미한다.

2. 어떠한 값도 전달할 수 있도록 props는 객체 형태이다.

3. props는 읽기 전용이다.
   props는 이름 성별과 같이 전달받아 변하지 않는 값이다.

---

props의 프로세스

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.

2. props를 이용해 1. 에서 정의한 값 속성을 전달한다.

3. 2. 에서 받은 것을 렌더링한다.

---

props 사용법

props 데이터 전달법으로 상위 컴포넌트에서 태그의 속성 값으로 넘겨주는 방법도 있지만, 컴포넌트의 태그 사이에 입력하는 것도 전달할 수 있다.

<Comp>something</Comp> 이런 식으로 전달했을때, something은 Comp 컴포넌트 내에서 props 객체의 children 이라는 키에 할당된다.

---

React Event Handling

리액트의 이벤트 처리는 DOM 방식과 유사하나 몇가지 문법적인 차이가 있다.

1. 리액트에서 이벤트는 camelCase로 적는다.
2. JSX로 문자열이 아닌 함수로 이벤트 핸들러를 처리한다.

DOM // <button onclick='eventHandler()'>event</button>

JSX // <button onClick={eventHandler}>event</button>

---

onChange 추가

입력란의 값을 e.target.value로 가져와서 state에 할당할 수 있다.

---

select

셀렉트 태그는 드롭 다운 목록으로 선택할 수 있는 옵션이 나오고, select 태그에 onClick 옵션을 두고 이벤트 핸들러 함수를 설정하는 것으로 e.target.value를 특정할 수 있다.

선택하는 목록은 select 태그의 하위에 option 태그를 만드는 것으로 생성한다.

---

React Data Flow

리액트는 top-down, 즉 상위에서 아래로 단 방향 데이터 흐름을 따른다.

---

오늘 만났던 오류

• 화살표 함수 사용할때 화살표 이후 중괄호가 오면 리턴을 써줘야 반환된다.

• 프롭스 사용할때 배열을 보낼건지 객체를 보낼껀지 괄호 구분 확실하게 해서 보내줘야한다.

• 스테이트 값을 객체 안에 넣을때 객체 안에서 컬시 리터럴 쓰지마라.

---

GOOD 😉

타임어택으로 리액트 스플린트를 완료했다.
리액트 스플린트를 풀며 리액트랑 조금 더 친해졌다.
state와 props 를 사용해 값을 변경하고 저장하며 하위 컴포넌트로 보내는 방법을 익혔다.

BAD 😥

오늘도 너무 더워서 오후엔 집중을 못했다.
내일 에어컨 생김

TO DO 🔥

• React
  • 스플린트 어드밴스드, 나이트메어 단계
  • 노마드 코더 리액트 클론코딩
  • 코딩앙마님 유튜브 보기

Retrospect 🧐

리액트 스테이트와 프롭스 위주로 학습하는 날 이었다.

아후 미리 선행학습을 해놔서 오늘 익히는데 애로사항이 없었지, 만약 처음부터 머리 박으며 배웠으면 과다 출혈로 리타이어 했을지도 모르겠다.

이래서 선행학습이 중요한데, 하루 배운거 정리하면 선행학습할 시간이 없어져버리니 에잉 ~
그래도 요샌 익히는 시간이 주라 좀 여유롭게 공부할 수 있는 것 같다.
니가 지금 여유로우면 안될텐데

그리고 오늘도 이 미친 계절님의 찬조로 오후를 거의 날리다시피 했다.
그래도 내일이면 이 미친 계절님의 손아귀에서 벗어날 수 있는 문명의 이기, 에어컨님이 오니 다행이다.

여름은 지옥이다.

Reference 🙇