240306 엘리스 SW트랙 11주차 Day 53

 

* Props(properties)는 사용할 때 DOM의 attribute와 비슷하다.

---

* DOM Element의 Attributes

 

- 여기에서 aria는 접근성과 관련된 설정들의 접두어이다. 장애인분들이 웹 페이지를 쉽게 접근할 수 있도록 도와주는 중요한 Attribute이다.

- style은 String이 아닌 Object로 작성해야한다.

- checked와 value는 input element에서 쓰이는 것들인데, 기존 html에서는 이 값들을 설정하면 기본값을 설정하는 역할을 하게 되는데, react에서는 다르게 작동한다.

=> value 값을 설정하게 되면 기본값으로 할당되는게 아니고 딱 그 값으로 고정되어 버린다. 그래서 value를 설정한 input element에 실제로 값을 입력하려고 시도하면 값이 변경되지 않는다. 

=> 만약 기본값을 설정하고 input을 자유롭게 변경하도록 설정하고 싶으면 defaultValue 또는 defaultChecked라는 값을 설정해주면 된다.

- key는 array에 있는 값들을 표현할 때, react가 값을 인지하기 용이하도록 도와주는 값이다.

- dangerouslySetInnerHTML은 String을 HTML로 변환하고 싶을 때 사용하는 어트리뷰트이다.

---

* Props는 부모 컴포넌트에서 자식 컴포넌트로만 전달이 가능하다.

* Props로 전달할 수 있는 데이터는 모든 자바스크립트 표현이라면 가능하다.

* Props가 변경되면 컴포넌트가 다시 렌더링된다.

---

* Props로 전달받은 데이터는 자유롭게 재할당하여 사용할 수 없다. 부모 컴포넌트로부터 전달받은 Props를 임의로 재할당해서 사용할 경우 컴포넌트를 렌더링할 때 문제가 발생할 수 있다.

---

[다시 복습]

* 기본적인 DOM Element(div, span 등)들의 Attribute는 camel case로 작성한다.

* Element의 클래스명은 class 대신 className으로 작성한다.

* <input> element의 기본값은 defaultValue, defaultChecked로 설정한다.

---

* State란 ? 

---

* State를 변경하는 두 가지 방법

---

* Object를 갖는 State를 만들 때 주의사항

 

- 왼쪽의 예시처럼 코드를 짜면 안되고 오른쪽처럼 짜야함 !

---

* State의 값을 변경하기 위해서는 반드시 setState 함수를 이용합니다. state 값을 임의로 변경해선 안 됩니다.

---

* [실습3] State 기초 부분 다시 한번 익히기 !

* [실습4] Object를 갖는 State 부분 다시 한번 익히기 !

* [실습5] State를 전달받는 Component 부분 다시 한번 익히기 !

---

* State는 Component 내에서 유동적으로 변할 수 있는 값을 저장한다.

* State는 개발자가 의도한 동작에 의해 변할 수도 있고, 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다.

* State가 변경되면 자동으로 컴포넌트가 재렌더링된다.

=> State 값이 변경되면 별도로 컴포넌트를 재렌더링하기 위한 함수를 호출하는게 아님 !!

* State를 변경하기 위해서는 setState 함수를 이용한다.

---

[복습]

* setState를 할 때, 변경할 값을 바로 매개변수로 전달해도 되고 함수를 전달해 값을 지정할 수도 있다.

---

* object나 array로 이루어진 state를 변경하고자 할 경우에는 원래의 state를 복제한 후 변경하여야 컴포넌트가 정상적으로 다시 렌더링된다.

=> object 혹은 array 내의 일부 값만 바꿀 경우, 실제 object나 array의 변경이 일어나는 것이 아니기 때문에 React에서 State값의 변경으로 인식하지 않아 재 렌더링 명령이 호출되지 않는다.

---

* 이벤트 처리(핸들링) 방법

---

* 이벤트 객체

 

- 여기에서 event.target은 event가 일어난 element를 뜻하고, event.target.value는 그 요소의 value를 가져오라는 뜻이다.

* setState와 event를 결합하면 사용자가 입력한 값을 state에 저장하는 로직을 짤 수 있다.

---

* 많이 쓰이는 DOM 이벤트

---

* 이벤트 핸들링 함수를 할당하는 방법에는 핸들링 함수를 선언하고 Element에 할당하는 방법과 Element 자체에 익명 함수를 작성해 전달하는 방법이 있다.

* DOM Element의 경우 이벤트 발생 시 이벤트 object를 매개변수로 전달한다.

* 이벤트는 사용자의 행동 뿐만 아니라 개발자의 의도한 로직에 의해 발생할 수도 있다.

---

* 이벤트 Object는 이벤트가 발생된 원인, 이벤트가 일어난 Element에 대한 정보를 얻을 수 있다.

* DOM Element의 이벤트는 기본적으로 이벤트 Object를 핸들링 함수에 전달한다.

* 이벤트 형태(클릭, 키 입력 등)와 DOM 종류(button, form, input 등)에 따라 전달되는 이벤트 Object의 내용은 다르다.

---

* DOM Input 값을 State에 저장하기

---

* 여러 Input 동시에 처리하기

 

=> 이 부분은 아직 확실하게 이해가 되지 않았다 ㅠ (이해가 갈듯말듯)

---

* 이벤트 핸들링 함수는 한 개만 선언해서 여러 Element에 재사용하여 코드를 효율적으로 작성할 수 있다.

---

* 컴포넌트 간 이벤트 전달하기

---

* 커스텀 이벤트

---

* 이벤트 핸들링 함수는 다른 컴포넌트로 전달하여 처리하는 것이 가능하다.

* 이벤트 핸들링 함수 역시 자바스크립트 표현이므로 부모 컴포넌트에서 자식 컴포넌트로 전달하여 활용하는 것이 가능하다.

---

* 컴포넌트는 컴포넌트 내에 다른 컴포넌트를 호출하여 참조하는 것이 가능하며, 이를 컴포넌트 합성이라고 한다.

---

* React에서는 컴포넌트의 재사용을 위해 컴포넌트를 적절히 합성하고 추출하는 것이 좋다.

---

* DOM(Document Object Model)이란 객체 지향 모델을 통해 구조화된 문서를 표현하는 형식이다.

* JSX는 자바스크립트를 확장한 문법을 말한다.

* element란 React 앱의 가장 작은 단위를 말한다.

* 컴포넌트로 값을 전달하기 위한 매개변수를 칭하는 용어는 props이다.

---

* 04 문제집 - Props > 컴포넌트 추출 부분 다시 한번 익히기 !

---

* State에 대한 설명

---

* Props vs State

---

* setState

 

=> 1초 있다가 red가 yellow로 바뀜

---

* React의 생명주기란 컴포넌트가 이벤트를 다룰 수 있는 특정 시점을 말한다.

* 컴포넌트가 실제 DOM에 삽입되는 것을 마운트라고 한다.

* 컴포넌트가 변하는 것을 업데이트라고 한다.

* 컴포넌트가 DOM 상에서 제거되는 것을 언마운트라고 한다.

---

* 05 문제집 - State와 생명주기 > [실습2] 함수 컴포넌트를 클래스로 변환 부분 다시 한번 익히기 !

* 05 문제집 - State와 생명주기 > [실습3] 클래스에 로컬 State 추가 부분 다시 한번 익히기 !

* 05 문제집 - State와 생명주기 > [실습5] State 업데이트 올바르게 사용하기 다시 한번 익히기 !

---

* 컴포넌트의 생명주기

---

* Props는 컴포넌트에 원하는 값을 넘겨주기 위해서 사용한다.

* Props의 값을 변경할 수 없다.

* Props로 함수를 전달할 수도 있다.

=> 변수, 배열, 객체 등 함수를 제외한 모든 자바스크립트의 요소를 넘겨줄 수 있다. XX  [오답]

---

* DOM 이벤트 이름

- onClick : 엘리먼트를 클릭했을 때 발생한다.

- onKeyPress : 사용자가 키보드를 눌렀을 때 발생하는 이벤트이다.

- onSubmit : Form 엘리먼트가 Submit했을 때 발생한다.

- onChange : 엘리먼트의 내용이 변경되었을 때 발생한다.

---

* 이벤트 처리하기

 

- 추가로 찾아본 DOM 요소란 ?

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

 

https://geniee.tistory.com/32

DOM (Document object Model) 완벽 정복하기

 

https://hu-coding.tistory.com/142

[JS] 자바스크립트와 DOM, HTML 요소 메소드

 

https://hans-j.tistory.com/145

[JavaScript]DOM이란?

 

- 이벤트 핸들러란 ?

https://hi-zini.tistory.com/entry/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%95%B8%EB%93%A4%EB%9F%AC-EventHandler

이벤트 핸들러 (EventHandler)

 

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events

이벤트 입문 - Web 개발 학습하기 | MDN

---

* React에서의 이벤트

---

* 06 문제집 - 이벤트 처리와 조건부 렌더링 및 Key 설정_[실습1] 리액트에서의 이벤트 부분에서

 

* 하이퍼링크 Default 설정
React에서 이벤트가 실행될 때, 페이지가 자동으로 새로고침 됩니다. 이를 방지하기 위해서 e.preventDefault()를 명시적으로 호출해야 합니다.

---

* 06 문제집 - 이벤트 처리와 조건부 렌더링 및 Key 설정_[실습4] 이벤트 핸들러에 매개변수 전달하기 부분에서

 

* 이벤트 핸들러에 매개변수 전달하기

매개변수가 포함된 이벤트 핸들러를 등록하려면 화살표 함수를 이용한 콜백 함수의 형태로 전달해야 합니다.

<button onClick={() => handleClick(d)}></button>

---

* 조건부 렌더링 알아보기

---

* 06 문제집 - 이벤트 처리와 조건부 렌더링 및 Key 설정_[실습4] 엘리먼트 변수에 따른 조건부 렌더링 부분 다시 한번 익히기 !

---

* 06 문제집 - 이벤트 처리와 조건부 렌더링 및 Key 설정_[실습5] 논리 연산자 (&&) 활용 부분에서

 

* 논리 연산자 (&&) 활용

 

* 06 문제집 - 이벤트 처리와 조건부 렌더링 및 Key 설정_[실습5] 논리 연산자 (&&) 활용 부분도 다시 한번 익히기 !

---

* 06 문제집 - 이벤트 처리와 조건부 렌더링 및 Key 설정_[실습6] 조건부 연산자 (?) 활용 부분에서

 

* parseInt(숫자로 변경할 문자열, 진법)을 사용해 문자를 숫자로 변환할 수 있습니다.

---

* Lists and Keys

 

- 키 값으로 index를 쓰지 않는게 좋은 이유

Index as a key is an anti-pattern (React) | by Robin Pokorny | Medium

Index as a key is an anti-pattern

 

- JSX 소개

JSX 소개 - React (reactjs-kr.firebaseapp.com)

Introducing JSX – React

 

- 컴포넌트와 Props

컴포넌트와 props - React (reactjs-kr.firebaseapp.com)

Components and Props – React

---

* 06 문제집 - 이벤트 처리와 조건부 렌더링 및 Key 설정 [실습7] map을 활용한 key 설정 부분에서

 

* map()함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

* 06 문제집 - 이벤트 처리와 조건부 렌더링 및 Key 설정 [실습7] map을 활용한 key 설정 부분도 다시 한번 익히기 !

---

* 06 문제집 - 이벤트 처리와 조건부 렌더링 및 Key 설정 [실습8] key로 컴포넌트 추출하기 부분도 다시 한번 익히기 !