🤔 들어가기 전

분명... 비밀번호가 맞는데?!!

앗... 비번 까먹었.....ㄴ ㅏ..?

해결 방법

📖 참고자료 Github 공식문서 개발냥발_[Mac] GitHub push token 오류 해결 Kim Jaewook_GitHub 토큰 인증 에러 해결 remote: Support for password authentication was removed. Please use a personal access token instead.

2021년 8월 31일부터 Github에서 token 방식으로 로그인을 해야 하며 이전 방식(Github 비밀번호)을 이용하면 위와 같은 fatal에러가 발생한다.

✨ solution

1. 프로필 → settings

2. 메뉴바 최하단에 있는 Developer settings 클릭

3. 메뉴바 하단에 있는 Personal access token 클릭 → 오른쪽에 있는 Generate new token 클릭

4. key 생성

• Note : key 이름
• Expiration : 사용기간
• Select scope : 토큰 허용 설정 (참고자료 블로그 확인하세요!)

🛑 주의 사항🛑

• 꼭! 반드시! Token key는 복사해서 메모장 또는 카톡, Notion 등 어딘가에 적어서 저장!
• Github에서 Token을 딱 한 번! 생성할 때만 보여줍니다. 잃어버리면... 재생성해야 합니다. 되찾기도 없어요...

🤔 들어가기 전

Next가 에러를 뱉었다! 에러를 해결하자!

해결 방법

📖 참고자료 LSJ HOME_styled-components className 을 props 로 전달할 경우 발생하는 에러 기억보다는 기록을_next.js styled-componsnts 스타일 적용 전에 렌더되는 에러 해결법 DEV_How to add Style-components to Next.js and start using it

Next.js에서 className을 props로 전달할 경우 발생하는 에러이다.

즉, styled-components를 사용하는데, CSS가 적용되기 전에 렌더링되어 발생하는 것이다.

✨ solution Next.js에서 styled-components를 사용하기 위해서 추가적인 설정을 해주어야 한다.

1. babel-plugin-styled-components 설치

   # -D : 개발용 설치 (-D, --save-dev: Package will appear in your devDependencies.)
   npm i -D babel-plugin-styled-components
   

npm i babel-plugin-styled-components

<br>

2. root 폴더 안에 `.babelrc`를 생성
```javascript
// .babelrc 설정
{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      { "fileName": true, "displayName": true, "pure": true, "ssr": true }
    ]
  ]
}

// fileName: 코드가 포함된 파일명을 알려줌
// displayName : 클래스명에 해당 스타일 정보 추가
// pure : 사용하지 않은 속성 제거
// ssr: server side rendering

🗓️ 수정 및 추가

✅ 2022.07.26

• 내용 추가

JavaScript 신문법?! 나온지 꽤 됐지만 정리해 보자!

Optional chaining

🧑‍🏫 참고 자료 MDN Optional chaining

Optional chaining 연산자는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성값을 읽을 수 있다.

만약 참조한 값이 null 또는 undefined라면 에러가 발생하지 않고 undefined를 반환한다.

✨ 왼쪽의 값이 비어있으면 오른쪽이 실행 X → 즉, undefined 반환 ✨ 중첩된 object에서 자료를 뽑을 경우 참조에러(reference)없이 안전하게 사용 가능

⚙️ 문법

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

✅ 예시

const person = {
  name: "홍길동",
  age: 32,
  // phone: {
  //   value: 1
  // }
};

// TypeError: Cannot read properties of undefined (reading 'value')
// 🚨 에러 발생! 코드 중단
console.log(person.phone.value);

// undefined
console.log(person.phone?.value);

Nullish coalescing

🧑‍🏫 참고 자료 MDN Nullish coalescing operator

Nullish coalescing operator는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

✨ 만약 왼쪽 표현식이 null 또는 undefined인 경우, 오른쪽 표현식의 결과를 반환한다. ✨ 리액트에서 서버에게 데이터가 늦는 경우 해당 값이 없어 에러가 발생한다. 이런 경우 ??을 사용하여 데이터를 기다리는 동안 다른 값을 보여주면 된다.

🛑 차이점 OR 연산자 ||은null 또는 undefined 뿐만 아니라 falsy값 전부를 검사하지만 Nullish coalescing ??은 undefined와 null같은 nullish만 검사하는 연산자이다.

⚙️ 문법

leftExpr ?? rightExpr

✅ 예시

console.log(data.name.id ?? "로딩중");

aixos를 통해 받은 JSON 값을 console.log로 출력하면 [object Object]로 보인다.

나도 보고 싶다.. 데이터..

JSON.stringify()

🧑‍🏫 참고 자료 MDN_JSON.stringify() Stackoeverflow_How to print JSON data in console.log? DevScroll_[JS] console.log의 [Object]를 객체로 출력하기

자바스크립트 값이나 객체를 JSON 문자열로 반환한다. JSON.stringify 메서드를 작성하면 객체 정보를 볼 수 있다.

console.log(`Promise.all 후에 받는 데이터 : ${JSON.stringify(data)}`);

예쁘게 들여쓰기 된 일반적인 코드를 보고 싶다면 다음과 같이 작성하면 된다.

console.log(`Promise.all 후에 받는 데이터 : ${JSON.stringify(data, null, "\t")}`);

✨ MDN : console.log() 공식문서

• MDN_console.log()

🤔 들어가기 전

Redux와 친해지려고 한순간 Store(스토어)가 나에게 취소선을 선사했다.

해결 방법

📖 참고자료 Redux_Redux 시작하기 Redux Toolkit Redux_Why Redux Toolkit is How To Use Redux Today Redux Github_업데이트 내용

관련 내용을 찾아본 결과 현재 공식 문서에서 Redux Tooolkit을 권장하고 있다. 결론은 createStore를 사용할 수 있고 기존의 모든 코드에서 작동한다. 그냥 취소선만 생겼을 뿐이다.

즉, 그냥 사용해도 되는데, 난 RTK를 사용했으면 좋겠어! 라는 말이다.

✨ solution 1 공식 문서가 권장하는 방법을 따른다. 가장 BEST!

1. Redux Toolkit을 설치

   # NPM
   npm install @reduxjs/toolkit
   

Yarn

yarn add @reduxjs/toolkit

<br>

2. `configureStore` 사용하기
```shell
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

✨ solution 2 공식 문서가 알려준 방법으로 취소선을 없앤다.

1. legacy_createStore를 추가해 준다.

   import { legacy_createStore as createStore } from "redux";

2. 원래 쓰던 방식대로 코드를 작성한다.

🏙️ Comment

갑자기 취소선이 생겨서 놀랐네..

저는 그냥 둘 다 사용법 익혔습니다. 혹시 몰라서..

createStore로 완성 → configureStore로 코드 리팩토링 (근데 configureStore 편하네요?! (｡･∀･)ﾉﾞ)

🗃️ 강의 K-MOOC 자료구조

성능이란 무엇인가?

🔸 성능 또는 효율 : 일 잘함 + 소요 시간 적음

같은 기능을 가진 어플이어도 처리 성능이 빠른 어플이 성능이 좋다고 할 수 있다. (즉, 요구하는 자원을 최소로 사용)

🔸 성능

• 성능 또는 효율
• 동일한 성과를 도출하기 위해서 요구되는 자원의 크기는 다음과 같다. (성과를 자원으로 나눈 것)

🔸 성능의 세가지 측면

• 최선의 경우
• 평균의 경우
• 최악의 경우

집에서 학교까지 가는 경우(등교 시간 9시)를 성능으로 간단하게 설명해 보자! ▶ 최선 : 최대한 빨리 도착해! (1시간 전 도착) ▶ 평균 : 학교에 보통 이 시간에 도착해! (30분 전 도착) ▶ 최악 : 아무리 늦어도 지각은 안 한다! (1분 전 도착)

최악의 경우는 보장의 의미를 가지고 있다. 그래서 성능을 이야기할 경우 반드시 최악의 경우를 정하고 성능을 말해야 한다.

🔸 자원의 두 가지 측면 : 공간과 시간

• 공간 복잡도 : 특정한 프로그램을 수행하는 데 요구되는 메모리
• 시간 복잡도 : 특정한 프로그램을 수행하는 데 요구되는 시간

컴퓨터에서 메모리가 공간 복잡도이면 CPU는 시간 복잡도이다.

메모리의 성능이 뛰어나도 CPU 처리 능력이 뒤처지면 무용지물이다. 마치 로스트 아크를 설치할 공간은 있지만 실행할 능력이 안 되는 것처럼..ㅠㅠ

즉, 시간이 공간보다 더 소중한 자원이다.

점근적 분석법

🔸 성능은 입력의 크기에 따라 결정된다. 입력의 크기는 n, 시간 복잡도를 n의 함수로 표현하면 f(n)으로 작성하면 다음과 같다.

• 입력이 증가하면 시간도 증가 ▶ 일반적
• 입력이 증가해도 시간은 일정 ▶ 최고
• 입력이 증가해도 시간은 감소 ▶ 없음

🔸 점근적 분석법

• 시간 복잡도는 매우 큰 입력에 대해서 측정한다.

작은 입력에서는 의미가 없기 때문에 점근적인 분석을 하기 위해선 매우 큰 입력을 가정하고 측정해야한다.

🔸 g(n)을 이용한 f(n)의 성능 표현

• g(n)은 항상 f(n)보다 커야 한다.
• g(n)은 f(n)보다 성능이 나쁨
• 최악의 경우에도 f(n)은 g(n)보다 좋음
• f(n)의 상한은 g(n)
• f(n) ≤ g(n)
• g(n)은 f(n)의 성능을 나타내는 척도로 사용
• 많이 사용되는 표준 함수 사용 ▶ 1, n, n^2, 2^n, log n

🤔 들어가기 전

왜 나는 일일이 다 작성하고 있었는가..（；´д｀）ゞ

Class Component

⚙️ VS Code에 rcc 작성

Function Component : 기본 함수

⚙️ VS Code에 rfc 작성

⚙️ VS Code에 rfce 작성

Function Component : 화살표 함수

⚙️ VS Code에 rafc 작성

⚙️ VS Code에 rafce 작성

🔎 React 공식문서 자료 React_React로 사고하기

React는 JavaScript로 규모가 크고 빠른 웹 애플리케이션을 만드는 가장 좋은 방법입니다. React는 Facebook과 Instagram을 통해 확장석을 입증했다.

React의 가장 멋진 점 중 하나는 앱을 설계하는 방식이다.

목업으로 시작하기

JSON API와 목업으로 디자이너로부터 받았다고 가정하자. 목업은 다음과 같다.

JSON API는 아래와 같은 데이터를 반환한다.

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

1단계 : UI를 컴포넌트 계층 구조로 나누기

우리가 할 첫 번째 일은 모든 컴포넌트(와 하위 컴포넌트)의 주변에 박스를 그리고 그 각각에 이름을 붙이는 것이다. 디자이너와 함께 일한다면, 이것들을 이미 정해두었을 수도 있다. 디자이너의 포토샵 레이어 이름이 React 컴포넌트의 이름이 될 수 있다.

하지만 어떤 것이 컴포넌트가 되어야 할지 어떻게 알 수 있을까? 우리가 새로운 함수나 객체를 만들 때 처럼 만들면 된다. 한 가지 테크님은 단일 책임 원칙이다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 원칙이다. 하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리되어야 한다.

✨ 단일 책임 원칙(Single responsibility principle)이란?

• wikipedia_단일 책임 원칙
• jaeseongdev_단일 책임 원칙
• 객체 지향 프로그래밍을 설계할 때 지켜야하는 원칙중 하나이다. (S.O.L.I.D에서 S)
• 모든 클래스는 각각 하나의 책임만 자겨야 하는 원칙을 말한다.
• 즉, 관련된 기능들을 묶어주는 것이다.

주로 JSON 데이터를 유저에게 보여주기 때문에, 데이터 모델이 적절하게 만들어졌다면, UI(컴포넌트 구조)가 잘 연결될 것이다. 이는 UI와 데이터 모델이 같은 인포메이션 아키텍처(information architecture)를 가지는 경향이 있기 때문이다. 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리해야 한다.

다섯개의 컴포넌트로 이루어진 앱을 한 번 살펴보자!

각각의 컴포넌트에 들어간 데이터는 이탤릭체 로 표기했다. 이미지의 숫자는 아래 숫자에 해당된다.

1. FilterableProductTable (노란색) : 예시 전체를 포괄한다.

2. SearchBar (파란색) : 모든 유저의 입력(user input)을 받는다.

3. ProductTable (연두색) : 유저의 입력(user input)을 기반으로 데이터 콜렉션(data collection)을 필터링해서 보여준다.

4. ProductCategoryRow (하늘색) : 각 카테고리(category)의 헤더를 보여준다.

5. ProductRow (빨강색) : 각각의 제품(Product)에 해당하는 행을 보여준다.

ProductTable을 보면 "Name"과 "Price" 레이블을 포함한 테이블 헤더만을 가진 컴포넌트는 없다. 이 같은 경우, 데이터를 위한 독립된 컴포넌트를 생성할지 생성하지 않을지는 선택이다. 이 예시에서는 ProductTable의 책임인 데이터 컬렉션(data collection)이 렌더링의 일부이기 때문에 ProductTable을 남겨두었다. 그러나 이 헤더가 복잡해지면 (즉, 정렬을 위한 기능을 추가하는 등) ProductTableHeader 컴포넌트를 만드는 것이 더 합리적이다.

이제 목업에서 컴포넌트를 확인했으니 이를 계층 구조로 나열해 보자!! 모형의 다른 컴포넌트 내부에 나타나는 컴포넌트 계층 구조의 자식으로 나타낸다.

2단계 : React 정적인 버전 만들기

!codepen[gaearon/embed/BwWzwm?default-tab=js%2Cresult]

이제 컴포넌트 계층구조가 만들어졌으니 앱을 실제로 구현해 보자!!

가장 쉬운 방법은 데이터 모델을 가지고 UI 렌더링은 되지만 아무 동작도 없는 버전을 만들어보는 것이다. 이처럼 과정을 나누는 것이 좋은데 정적 버전을 만드는 것은 생각이 적게 필요하지만 타이핑은 많이 필요로 하고, 상호작용을 만드는 것은 생각은 많이 해야 하지만 타이핑은 정게 필요로 하기 때문이다.

데이터 모델을 렌더링하는 앱의 정적 버전을 만들기 위해 다른 컴포넌트를 재사용하는 컴포넌트를 만들고 props를 이용해 데이터를 전달한다. props는 부모가 자식에게 데이터를 넘겨줄 때 사용할 수 있는 방법이다. 정적 버전을 만들기 위해 state를 사용하지 말아야 한다. state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용한다. 우리은 앱의 정적 버전을 만들고 있기 때문에 state는 필요 없다.

앱을 만들 때 하향식(top-down)이나 상향식(bottom-up)으로 만들 수 있다. 다시 말해 계층 구조의 상층부에 있는 컴포넌트 (즉, FillterableProductTable 부터 시작하는 것)q부터 만들거나 하층부에 있는 컴포넌트 (ProductRow)부터 만들 수도 있다. 간단한 예시에서는 보통 하향식으로 만드는 게 쉽지만 프로젝트가 커지면 상향식으로 만들고 테스트를 작성하면서 개발하기가 더 쉽다.

이 단계가 끝나면 데이터 렌더링을 위해 만들어진 재사용 가능한 컴포넌트들의 라이브러리를 가지게 된다. 현재는 앱의 정적 버전이기 때문에 컴포넌트는 render() 메서드만 가지고 있을 거이다. 계층구조의 최상단 컴포넌트 (FilterProductTable)는 prop으로 데이터 모델을 받는다. 데이터 모델이 변경되면 ReactDOM.render()를 다시 호출해서 UI가 업데이트 된다. UI가 어떻게 업데이트되고 어디에서 변경해야하는지 알 수 있다. React의 단방향 데이터 흐름 (one-way data flow) ** 또는 **단방향 바인딩 (one-way binding)은 모든 것을 모듈화 하고 빠르게 만든어 준다.

3단계 : UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기

UI를 사용작용하게 만들려면 기반 데이터 모델을 변경할 수 있는 방법이 있어야 한다. 이를 React는 state를 통해 변경한다.

🔎 Props vs State : 차이점은??

• React_state와 props
• props(properties)와 state는 일반 JavaScript 객체이다.
• 두 객제 모두 렌더링 결과물에 영향을 주는 정보를 작고 있는데, 방식에 차이가 있다.
• props : 부모 컴포넌트가 자식 컴포넌트에게 전달한다. 단, 자식 컴포넌트는 부모 컴포넌트에게 전달할 수 없으며 오로지 읽기만 가능한 값이다.
• state : 컴포넌트 안에서 관리한다. 즉, 함수 안에서 선언된 지역 변수처럼 사용되는 값이다.

애플리케이션을 올바르게 만들기 위해서는 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합으로 생각해야 한다. 여기서 핵심은 중복 배제 원칙이다. 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들이 필요에 따라 그때 그때 계산되도록 만들어야 한다. 예를 들어, TOTO 아이템의 개수를 표현하는 state를 변도로 만들지 말아야 한다. TODO 갯수를 렌더링해야 한다면 TODO 아이템 배열의 길이를 가져오면 된다.

✨ 중복 배제 원칙(Don't repeat yourself; DRY)

• wikipedia_중복 배제
• 소프트웨어 개발 원리의 하나로, 모든 형태의 정보 중복을 지양하는 원리이다.
• 특히, 다층 구조 시스템에서 유용하다.
• "모든 지식은 시스템 내에서 유일하고 중복이 없으며 권위있는 표상만을 가진다."

예시 애플리케이션 내 데이터들을 생각해 보자!! 애플리케이션은 다음과 같은 데이터를 가지고 있다.

• 제품의 원본 목록
• 유저가 입력한 검색어
• 체크박스의 값
• 필터링 된 제품들의 목록

각각 살펴보고 어떤 게 state가 되어야 하는지 살펴보자!! 이는 각 데이터에 대해 아래의 세 가지 질문을 통해 결정할 수 있다.

1. 부모로부터 props를 통해 전달이 가능한가?

2. 시간이 지나도 변하지 않는가?

3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가?

제품의 원본 목록은 props를 통해 전달되므로 state가 아니다. 검색어와 체크박스는 state로 볼 수 있는데 시간이 지남에 따라 변하기도 하면서 다른 것들로 부터 계산될 수 없기 때문이다. 그리고 마지막으로 필터링된 목록은 state가 아니다. 제품의 원본 목록과 검색어, 체크박스의 값을 조합해서 도출할 수 있기 때문이다.

결과적으로 애플리케이션은 유저가 입력한 검색어와 체크박스의 값이 state를 가진다.

4단계 : state가 어디에 있어야 할 지 찾기

다음으로 어떤 컴포넌트가 state를 변경하거나 소유할지 찾아야 한다.

🛑 주의

• React는 항상 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따른다. 그래서 어떤 컴포넌트가 어떤 state를 가져야 하는지 바로 결정하기 어려울 수 있다.
• 초보자들이 가장 어려워 하는 부분!! 집중! 🙀

애플리케이션이 가지는 각각의 state에 대해서

1. state를 기반으로 렌더링하는 모든 컴포넌트를 찾는다.

2. 공통 소유 컴포넌트(common owner component)를 찾는다. → 계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트

3. 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야한다.

4. state를 소유할 적절한 컴포넌트를 찾지 못했다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 오너 컴포넌트의 상위 계층에 추가한다.

이 전략을 애플리케이션에 적용하면 다음과 같다.

• ProductTable은 state에 의존한 상품 리스트의 필터링해야 하고 SearchBar는 검색어와 체크박스의 상태를 표시해야 한다.

• 공통 소유 컴포넌트는 FilterableProductTable이다.

• 의미상으로도 FilterableProductTable이 검색어와 체크박스의 체크 여부를 가지는 것이 타당하다.

먼저 인스턴스 속성인 this.state = {filterText: '', inStockOnly: false} 를 FilterableProductTable의 constructor에 추가하여 애플리케이션의 초기 상태를 반영합니다. 그리고 나서 filterText와 inStockOnly를 ProductTable와 SearchBar에 prop으로 전달합니다. 마지막으로 이 props를 사용하여 ProductTable의 행을 정렬하고 SearchBar의 폼 필드 값을 설정하세요.

5단계 : 역방향 데이터 흐름 추가하기

!codepen[gaearon/embed/LzWZvb?default-tab=js%2Cresult]

지금까지 우리는 계층 구조 아래로 흐르는 props와 state의 함수로써 앱을 만들었다. 이제 다른 방향의 데이터 흐름을 만들어 보자!!

계층 구조의 하단에 있는 폼 컴포넌트에서 FilterableProductTable의 state를 업데이트할 수 있어야 한다.

React는 전통적인 양방향 데이터 바인딩(two-way data binding)과 비교하면 더 많은 타이핑을 필요로 하지만 데이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떻게 동작하는지 파악할 수 있게 도와준다.

4단계의 예시에서 체크하거나 키보드를 타이핑할 경우 React가 입력을 무시하는 것을 확인할 수 있다. 이는 input 태그의 value 속성이 항상 FilterableProductTable에서 전달된 state와 동일하도록 설정했기 때문입니다.

우리가 원하는 것이 무엇인지를 한번 생각해 보자..!

우리는 사용자가 폼을 변경할 때마다 사용자의 입력을 반영할 수 있도록 state를 업데이트하기를 원한다. 컴포넌트는 그 자신의 state만 변경할 수 있기 때문에 FilterableProductTable는 SearchBar에 콜백을 넘겨서 state가 업데이트되어야 할 때마다 호출되도록 할 것이다. 우리는 input에 onChange 이벤트를 사용해서 알림을 받을 수 있다. FilterableProductTable에서 전달된 콜백은 setState()를 호출하고 앱이 업데이트될 것이다.

👋 Comment

React를 너무 후다닥 배운 감이 있어서 공식 문서를 보면서 기초를 다시 공부했다.. 그리고.. 너무 무지성으로 짠것 같아서 스스로에게 너무 화가 났기도..ㅠㅠ🙀🙀

아직 갈 길이 멀다..!! 기본적인 실습을 하고 고급 안내서로..!!!

🔎 React 공식문서 자료 React_합성 vs 상속

React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋다.

컴포넌트에서 다른 컴포넌트를 담기

어떤 컴포넌트들은 어떤 지식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있다. 범용적인 '박스' 역할을 하는 Slidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다.

이러한 컴포넌트에서는 특수한 children prop을 사용하며 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

이러한 방식으로 다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있다.

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

!codepen[gaearon/embed/ozqNOV?default-tab=js%2Cresult]

<FancyBorder> JSX 태그 안에 있는 것들이 FancyBorder 컴포넌트의 children prop으로 전달된다. FancyBorder는 {props.children}을 <div> 안에 렌더링하므로 전달된 엘리먼트틀이 출력된다.

흔하진 않지만 종종 컴포넌트에 여러 개의 '구멍'이 필요할 수도 있다. 이런 경우에는 children 대신 자신만의 고유한 방식을 적용할 수 있다.

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

!codepen[gaearon/embed/gweOJp?default-tab=js%2Cresult]

<Contacts />와 <Chat /> 같은 React 엘리먼트는 단지 객체이기 때문에 다른 데이터처럼 prop으로 전달할 수 있다. 이러한 접근은 다른 라이브러리의 슬롯(slot)과 비슷해보이지만 React에서 prop으로 전달할 수 있는 것에는 제한이 없다.

특수화

때로는 어떤 컴포넌트의 '특수한 경우'인 컴포넌트를 고려해야 하는 경우가 있다. 예를 들어, WelcomeDialog는 Dialog의 특수한 경우라고 할 수 있다.

React에서는 이 역시 합성을 통해 해결할 수 있다. 더 구체적인 컴포넌트가 일반적인 컴포넌트를 렌더링하고 props를 통해 내용을 구성한다.

// ⚙️ 구체적인 컴포넌트
// - 일반적인 컴포넌트를 렌더링
// - prop를 받아서 컴포넌트 내용 구성
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

// ⚙️ 일반적인 컴포넌트
// - prop를 넘겨줌
function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

!codepen[gaearon/embed/ZpxEgr?default-tab=js%2Cresult]

합성은 클래스로 정의된 컴포넌트에서도 동일하게 적용된다.

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}

!codepen[gaearon/embed/gwebYa?default-tab=js%2Cresult]

그렇다면 상속은?

컴포넌를 상속 계층 구조에 대한 예시는 아직 없다.

props와 합성은 명시적이고 안전한 방법으로 컴포넌트의 모양과 동작을 커스터마이징하는데 필요한 모든 유연성을 제공한다. 컴포넌트가 원시 타입의 값, React 엘리먼트 혹은 한수 등 어떠한 props도 받을 수 있다는 것을 기억해야 한다.

UI가 아닌 기능을 여러 컴포넌트에서 재사용하기를 원한다면, 별도의 JavaScript 모듈로 분리하는 것이 좋다. 컴포넌트에서 해당 함수, 객체, 클래스 들을 import하여 사용할 수 있다.

✨ 즉, 상속받을 필요 없다!!! ✨

🔎 React 공식문서 자료 React_State 끌어올리기

종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있다. 이럴 때는 가장 가까운 공통 조상으로 state를 끌러올리는 것이 좋다.

⚙️ 예시 코드 - 1

• BoilingVeridict 컴포넌트 생성
• 컴포넌트가 celsius prop를 받아서 이 온도가 물이 끓기에 충분하지 여부를 출력

  function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    // props.celsius가 100 이상인 경우
    return <p>The water would boil.</p>;
  }
  // props.celsius가 100 미만인 경우
  return <p>The water would not boil.</p>;
  }

⚙️ 예시 코드 - 2

• Calculatro 컴포넌트 생성

• 온도를 입력할 수 있는 <input>을 렌더링하고 그 값을 this.state.temperature에 저장

• 현재 입력값에 대한 BoilingVerdict 컴포넌트를 렌더링

  class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    // ✨ 제어 컴포넌트
    // React 값에 의해 폼 제어
    this.state = {temperature: ''};
  }
  
  handleChange(e) {
    // ✨ 제어 컴포넌트
    // setState()로 값을 업데이트
    this.setState({temperature: e.target.value});
  }
  
  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />
        // ⚙️ parseFloat
        // 주어진 값을 부동소수점 실수로 파싱해서 반환
        <BoilingVerdict
          celsius={parseFloat(temperature)} />
      </fieldset>
    );
  }
  }

!codepen[gaearon/embed/ZXeOBm?default-tab=js%2Cresult]

두 번째 Input 추가하기

새 요구사항으로써 섭씨 입력 필드뿐만 아니라 화씨 입력 필드를 추가하고 두 필드 간에 동기화 상태를 유지하도록 해보자!

⚙️ 예시 코드 - 1

• Calculator에서 TemperatureInput 컴포넌트를 빼내는 작업
• "c" 또는 "f"의 값을 가질 수 있는 scale prop를 추가

  // 섭씨와 화씨를 가지는 객체 생성
  const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
  };
  

class TemperatureInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = {temperature: ''}; }

handleChange(e) { // 섭씨 또는 화씨로 값을 업데이트 this.setState({temperature: e.target.value}); }

render() { const temperature = this.state.temperature; const scale = this.props.scale; return (

<br>

⚙️ **예시 코드 - 2**
- `Calculator`가 분리된 두 개의 온도 입력 필드를 렌더링하도록 변경
```javascript
class Calculator extends React.Component {
  render() {
    return (
      <div>
        <TemperatureInput scale="c" />
        <TemperatureInput scale="f" />
      </div>
    );
  }
}

이제 두 개의 입력 필드를 갖게 됐다. 그러나 둘 중 하나에 온도를 입력하더라도 다른 하나는 갱신되지 않는 문제가 발생한다. 이것은 두 입력 필드 간에 동기화 상태를 유지하고자 했던 원래 원래 요구사항과는 맞지 않다.

또한, Calculator에서 BoilingVerdict도 보여줄 수 없는 상황이다. 현재 입력된 온도 정보가 TemperatureInput안에 숨겨져 있으므로 Calculator는 그 값을 알 수 없다.

변환 함수 작성하기

⚙️ 예시 코드 - 1

• 섭씨 → 화씨 & 화씨 → 섭씨로 변환하는 함수 생성

  function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
  }
  

function toFahrenheit(celsius) { return (celsius * 9 / 5) + 32; }

이 두 함수는 숫자를 변환한다. 이제 `temperature` 문자열과 변환 함수를 인수로 취해서 문자열을 반환하는 또 다른 함수를 생성한다. 그리고 그것을 한 입력값에 기반해 나머지 입력 값을 계산하는 용도로 사용할 것이다.

⚙️ **예시 코드 - 2**
- 올바르지 않은 `temperature` 값에 대해서는 빈 문자열을 반환하고 값을 소수점 세 번째 자리로 반올림하여 출력
```javascript
// tryConvert는 두 개의 매개변수를 사용
function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);

  // Number.isNaN() 메서드는 전달된 값이 NaN인지 아닌지를 검사
  // 오직 숫자인 값에만 동작, NaN인 경우 동작 X
  if (Number.isNaN(input)) {
    // NaN인 경우 빈 문자열을 반환
    return '';
  }
  const output = convert(input);

  // Math.round() 메서드는 입력값을 반올림한 수와 가장 가까운 정수 값을 반환
  // 즉, 우리가 수학에서 배운 반올림과 같다!
  const rounded = Math.round(output * 1000) / 1000;

  // toString() 메서드는 문자열을 반환
  return rounded.toString();
}

State 끌어올리기

⚙️ 예시 코드 - 1

• 현재는 두 TemperatureInput 컴포넌트가 각각의 입력값을 각자의 state에 독립적으로 저장

  class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }
  
  handleChange(e) {
    this.setState({temperature: e.target.value});
  }
  
  render() {
    const temperature = this.state.temperature;
    // ...

그러나 우리는 두 입력값이 서로의 것과 동기화된 상태로 있길 원한다. 섭씨온도 입력값을 변경할 경우 화씨온도 입력값 역시 반환된 온도를 반영할 수 있어야 한다. (그 반대의 경우에도 마찬가지여야 한다.)

React에서 state를 공유하는 일은 그 값을 필요로 하는 컴포넌트 간의 가장 가까운 공통 조상으로 state를 끌어올림으로써 이뤄낼 수 있다. 이렇게 하는 방법을 state 끌어올리기라고 부른다. 이제 TemperatureInput이 개별적으로 가지고 있던 지역 state를 지우는 대신 Calculator로 그 값을 옮겨놓을 것이다.

Clculator가 공유될 state를 소유하고 있으면 이 컴포넌트는 두 입력 필드의 현재 온도에 대한 진리의 원천(source of truth) 이 된다. 이를 통해 두 입력 필드가 서로 간에 일관된 값을 유지하도록 만들 수 있다. 두 TemperatureInput 컴포넌트의 prop가 같은 부모인 Calculator로 부터 전달되기 때문에 두 입력 필드는 항상 동기화된 상태를 유지할 수 있다.

⚙️ 예시 코드 - 2

• TemperatureInput 컴포넌트에서 this.state.temperature를 this.props.temperature로 대체
• 나중에 이 값을 Calculator로 부터 보내주어야 함

  render() {
    // Before: const temperature = this.state.temperature;
    // ✨ props는 읽기 전용!!!
    const temperature = this.props.temperature;
    // ...

props는 읽기 전용이다.

temperature가 지역 state였을 때는 그 값을 변경하기 위해서 그저 TemperatureInput의 this.setState()를 호출하는 걸로 충분했다. 그러나 이제 temperature가 부모로부터 prop로 전달되기 때문에 TemperatureInput은 그 값을 제어할 능력이 없다.

React에서는 보통 이 문제를 컴포넌트를 제어가능하게 만드는 방식으로 해결한다. DOM <input>이 value와 onChange prop를 건네받는 것과 비슷한 방식으로, 사용자 정의된 TemperatureInput 역시 temperature와 onTemperatureChange props 자신의 부모인 Calculator로 부터 받을 수 있다.

⚙️ 예시 코드 - 3

• TemperatureInput에서 온도를 갱신하고 싶으면 this.props.onTemperatureChange를 호출

  handleChange(e) {
    // Before: this.setState({temperature: e.target.value});
    this.props.onTemperatureChange(e.target.value);
    // ...

🛑 주의!

• 사용자 정의 컴포넌트에서 temperature와 onTemperatureChange prop의 이름이 특별한 의미를 갖지는 않는다.
• 일관된 컨벤션으로 value와 onChange을 사용할 수도 있으며, 개발자가 원하는 이름을 사용할 수 있다.

onTemperatureChange prop는 부모 컴포넌트인 Calculator로 부터 temperature prop와 함께 제공될 것이다. 이를 이용해 자신의 지역 state를 수정해서 변경사항을 처리하므로, 변경된 새 값을 전달받은 두 입력 필드는 모두 리렌더링될 것이다.

Calculator의 변경사항을 보기 전에 TemperatureInput 컴포넌트에 대한 변경사항을 요약하면 다음과 같다. 이 컴포넌트의 지역 state를 제거했으며 this.state.temperature 대신에 this.props.temperature를 읽어오도록 변경했다. state를 변결하고 싶을 경우 this.setState() 대신에 Calculator로부터 받은 this.props.onTemperatureChange()를 호출하도록 만들었다.

⚙️ 예시 코드 - 3

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    // input값을 가져옴
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

이제 다시 Calculator 컴포넌트를 살펴보자!

temperature와 scale의 현재 입력값을 이 컴포넌트의 지역 state에 저장한다. 이것은 개발자가 입력 필드들로부터 끌어올린 state이며 그들에 대한 진리의 원천(source of truth) 으로 작용할 것이다. 또한, 두 입력 필드를 렌더링하기 위해서 알아야 하는 모든 데이터를 최소한으로 표현하는 것이기도 한다.

⚙️ 예시 코드 - 4

// 섭씨 입력 필드에 37을 입력하면 `Calculator` 컴포넌트의 sate는 다음과 같다.
{
  temperature: '37',
  scale: 'c'
}

// 이후에 화씨 입력 필드의 값을 212로 수정하면 Calculator의 state는 다음과 같다.
{
  temperature: '212',
  scale: 'f'
}

두 입력 필드에 모두 값을 저장하는 일도 가능했지만 결국은 불필요한 작업이었다...

가장 최근에 변경된 입력값과 그 값이 나타내는 단위를 저장하는 것만으로도 충분하다. 그러고 나면 현재의 temperature와 scale에 기반해 다른 입력 필드의 값을 추론할 수 있다.

두 입력 필드의 값이 동일한 state로부터 계산되기 때문에 이 둘은 항상 동기화된 상태를 유지하게 된다.

⚙️ 예시 코드 - 5

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;

    // 삼항 연산자 이용!
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

!codepen[gaearon/embed/WZpxpz?default-tab=js%2Cresult]

이제 어떤 입력 필드를 수정하든 간에 Calculator의 this.state.temperature와 this.state.scale이 갱신된다. 입력 필드 중 하나는 있는 그대로의 값을 받으므로 사용자가 입력한 값이 보존되고, 다른 입력 필드의 값은 항상 다른 하나에 기반해 재계산된다.

입력 값을 변경할 경우 일어나는 과정은 다음과 같다.

1. React는 DOM <input>의 onChange에 지정된 함수를 호출한다. 위 예시의 경우 TemperatureInput의 hanldeChange 메서드에 해당한다.

2. TemperatureInput 컴포넌트의 handleChange 메서드는 새로 입력된 값고 함께 this.props.onTemperatureChange()를 호출한다. onTemperatureChange를 포함한 이 컴포넌트의 props는 부모 컴포넌트인 Calculator로부터 제공받은 것이다.

3. 이전 렌더링 단계에서, Calculator는 섭씨 TemperatureInput의 onTemperatureChange를 Calculator의 handleCelsiusChange 메서드로, 화씨 TemperatureInput의 onTemperatureChange를 Calculator의 handleFahrenheitChange 메서드로 지정해 놓는다. 따라서 어떤 입력 필드를 수정하느냐에 따라 Calculator의 두 메서드 중 하나가 호출된다.

4. 이들 메서드는 내부적으로 Calculator 컴포넌트가 새 입력값, 그리고 현재 수정한 입력 필드의 입력 단위와 함께 this.setState()를 호출하게 함르호써 React에게 자신을 다시 렌더링하도록 요청한다.

5. React는 UI가 어떻게 보여야 하는지 알아내기 위해 Calculator 컴포넌트의 render 메서드를 호출한다. 두 입력 필드의 값은 현재 온도와 활성화된 단위를 기반으로 재계산된다. 온도의 변환이 이 단께에서 수행된다.

6. React는 Calculator가 전달한 새 props와 함께 각 TemperatureInput 컴포넌트의 render 메서드를 호출한다. 그러면서 UI가 어떻게 보여아 할지를 파악한다.

7. React는 BoilingVerdict 컴포넌트에게 섭씨온도를 props로 건네면서 그 컴포넌트의 render 메서드를 호출한다.

8. React DOM은 물의 끓는 여부와 올바른 입력값을 일치시키는 작업과 함께 DOM을 갱신한다. 값을 변경한 입력 필드는 현재 입력값을 그대로 받고, 다른 입력 필드는 변환된 온도 값으로 갱신된다.

입력 필드의 값을 변경할 때만다 동일한 정차를 거치고 두 입력 필드는 동기화된 상태로 유지된다.

교훈

• state를 끌어올리는 작업은 양방향 바인딩 접근 방식보다 더 많은 보일러 플레이트 코드를 유발하지만, 버그를 찾고 격리하기 더 쉽게 만든다는 장점이 있다.

• 사용자의 입력을 거부하거나 변경하는 자체 로직을 구현할 수 있다.

• 어떤 값이 props 또는 state로부터 계산될 수 있다면, 아마도 그 값을 state에 두어서는 안 된다.

🔎 React 공식문서 자료 React_폼

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작한다. 예를 들어, 순수한 HTML에서 이 폼은 name을 입력받는다.

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행한다. React에서 동일한 동작을 원한다면 그대로 사용하면 된다. 그러나 대부분의 경우, JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리하다.

이를 위한 표준 방식은 제어 컴포넌트(controlled components)라고 불리는 기술을 이용한다.

제어 컴포넌트 (Controlled Component)

HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 된다.

우리는 React state를 신뢰 가능한 단일 출처(single source of truth)로 만들어 두 요소를 결합할 수 있다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어한다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트(controlled component)라고 한다.

⚙️ 예시 코드

• 이름이 기록되길 원한다면 폼을 제어 컴포넌트로 작성한다.

  class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    // ✨ preventDefault()
    // - 어떤 이벤트를 명시적으로 처리하지 않은 경우,
    // 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 저장
    // - 이벤트 흐름의 어떤 흐름에서 preventDefault()를 실행하면 이벤트 취소
    event.preventDefault();
  }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
  }

!codepen[gaearon/embed/VmmPgp?default-tab=js%2Cresult]

value 어트리뷰트는 폼 엘리먼트에 설정되므로 표시되는 값은 항상 this.state.value가 되고 React state는 신뢰 가능한 단일 출처(single source of truth)가 된다. React state를 업데이트하기 위해 모든 키 입력에서 handleChange가 동작하기 때문에 사용자가 입력할 때 보여지는 값이 업데이트된다.

제어 컴포넌트로 사용하면, input의 값은 항상 React state에 의해 결정된다. 코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있다.

textarea 태그

HTML에서 <textarea> 엘리먼트는 텍스트를 자식으로 정의한다.

<textarea>
  Hello there, this is some text in a text area
</textarea>

React에서 <textarea>는 value 어트리뷰트를 대신 사용한다. 이렇게 하면 <textarea>를 사용하는 폼은 한 줄 입력을 사용하는 폼과 비슷하게 작성할 수 있다.

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Essay:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

this.state.value를 생성자에서 초기화하므로 textarea는 일부 텍스트를 가진채 시작되는 점을 주의해야 한다.

select 태그

HTML에서 <select>는 드롭 다운 목록을 만든다. 예를 들어, 이 HTML은 과일 드롭 다운 목록을 만든다.

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>

  <!-- selected ▶ 기본값으로 시작 (선택) -->
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

selected 옵션이 있으므로 Coconut 옵션이 초기값이 되는 점을 주의해야 한다. React에서는 selected 어트리뷰트를 사용하는 대신 최상단 select 태그에 value 어트리뷰트를 사용한다. 한 곳에서 업데이트만 하면 되기 때문에 제어 컴포넌트에서 사용하기 더 편한다.

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          // select ▶ HTML의 selected와 같음 (기본값 선택)
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

!codepen[gaearon/embed/JbbEzX?default-tab=js%2Cresult]

전반적으로 <input type="text">, <textarea> 및 <select> 모두 매우 비슷하게 동작한다. 모두 제어 컴포넌트를 구현하는데 value 어트리뷰트를 허용한다.

🛑 주의

• select 태그에 multiple 옵션을 허용한다면 value 어트리뷰트에 배열을 전달할 수 있다.

  // B와 C를 동시에 선택 가능
  <select multiple={true} value={['B', 'C']}>

file input 태그

HTML에서 <input type="file">는 사용자가 하나 이상의 파일을 자신의 장치 저장소에서 서버로 업로드하거나 File API를 통해 JavaScript로 조작할 수 있다.

<!-- ⚙️ file-->
<!-- 1. 선택한 모든 파일을 나열하는 FileList 객체 -->
<!-- 2. multiple 특성을 지정하지 않았다면 두 개 이상의 파일을 포함하지 않음 -->
<input type="file" />

값이 읽기 전용이기 때문에 React에서는 비제어 컴포넌트이다.

다중 입력 제어하기

여러 input 엘리먼트를 제어해야할 때, 각 엘리먼트에 name 어트리뷰트를 추가하고 event.target.name 값을 통해 핸들러가 어떤 작업을 할 지 선택할 수 있게 한다.

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

주어진 input 태그의 name에 일치하는 state를 업데이트하기 위해 ES6의 computed property name구문을 사용한다.

this.setState({
  [name]: value
});

ES5 코드는 다음과 같다.

var partialState = {};
partialState[name] = value;
this.setState(partialState);

또한, setState()는 자동적으로 현재 state에 일부 state를 병합하기 때문에 바뀐 부분에 대해서만 호출하면 된다.

✨ 객체 초기자(computed property name)

• MDN_객체 초기자
• {중괄호}로 묶인 0개 이상의 객체의 프로퍼티명과 관련 값의 쌍을 콤마로 구분한 목록이다.

제어되는 Input Null 값

제어 컴포넌트에 value prop을 지정하면 의도하지 않는 한 사용자가 변경할 수 없다. value를 설정했는데 여전히 수정할 수 있다면 실수로 value를 undefined나 null로 설정했을 수 있다.

ReactDOM.render(<input value="hi" />, mountNode);

// 1초 뒤에 입력 가능
setTimeout(function() {
  ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

제어 컴포넌트의 대한

데이터를 변경할 수있는 모든 방법에 대해 이벤트 핸들러를 작성하고 React 컴포넌트를 통해 모든 입력 상태를 연결해야 하기 때문에 때로는 제어 컴포넌트를 사용하게 지루할 수 있다.

특히, 기존의 코드 베이스를 React로 변경하고자 할 때나 React가 아닌 라이브러리와 React 애플리케이션을 통합하고자 할 때 짜증날 수 있다.

이러한 경우에 입력 폼을 구현하기 위한 대체 기술인 비제어 컴포넌트를 사용한다.

완전한 해결책

유효성 검사, 방문한 필드 추적 및 폼 제출 처리와 같은 완벽한 해결을 원한다면 Formik이 대중적인 선택중 하나이다. 그러나 Formik은 제어 컴포넌트 및 state 관리에 기초하기 때문에 공부를 해야 한다.

🤔 들어가기 전

WSL2를 실행하고 다른 작업을 하려는 순간..

하..（；´д｀）ゞ

비밀번호를 까먹었다..;;

⚙️ 해결방법

✨ 참고자료 SeeRoE 프로그래밍 기록_WSL Ubuntu 비밀번호 초기화 IT위키_리눅스 passwd(명령어)

1. 명령 프롬프트(cmd)를 실행

• 방법 1 : 윈도우 돋보기를 이용하여 cmd검색 → 실행
• 방법 2 : 윈도우 + R 단축키 → cmd 입력 → 실행

2. root 설정

• Ubunut 실행 시 root로 접속하도록 설정한다.

  ubuntu.exe config --default-user root

3. Ubuntu 실행

4. 비밀번호 재설정

• 명령어 passwd를 이용하여 새로운 비밀번호를 설정한다.
• "사용자 계정"부분에서 "는 제외하고 작성!!

  passwd "사용자 계정"

5. root → 기본 계정으로 접속

• cmd에서 다시 내 계정으로 접속한다.
• "사용자 계정"부분에서 "는 제외하고 작성!!

  ubuntu.exe config --default-user "사용자 계정"

🔎 React 공식문서 자료 React_리스트와 Key

먼저 Javascript에서 리스트를 어떻게 변환하는지 살펴보자!

⚙️ 예시 코드

• map() 함수를 이용하여 numbers 배열의 값을 두배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그로 확인하는 코드이다.

  const numbers = [1, 2, 3, 4, 5];
  

// 2를 곱한 값을 변수 doubled에 새로운 배열로 저장 const doubled = numbers.map((number) => number * 2);

// [2, 4, 6, 8, 10]을 출력 console.log(doubled);

React에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일하다.

<br>

## 여러 개의 컴포넌트 렌더링 하기
엘리먼트 모음을 만들고 중괄호 `{}`를 이용하여 JSX에 포함시킬 수 있다.

⚙️ **예시 코드 - 1**
- `map()` 함수를 이용하여 배열을 반복 실행하면서 `<li>{number}</li>` 엘리먼트를 반환
- 엘리먼트 배열의 결과는 변수 `listItems`에 저장
```javascript
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

⚙️ 예시 코드 - 2

• listItems 배열을 <ul> 엘리먼트 안에 포함시켜 DOM에 렌더링

  ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
  );

⚙️ 전체 코드

!codepen[gaearon/embed/GjPyQM?default-tab=html%2Cresult]

기본 리스트 컴포넌트

일반적으로 컴포넌트 안에서 리스트를 렌더링한다.

🛠️ 리팩토링 - 1

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

🛠️ 리팩토링 - 2

• 이 코드를 실행하면 리스트의 각 항목에 key를 추가하라는 경고가 표시된다.

• key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이다.

• numbers.map() 안에서 리스트의 각 항목에 key를 할당하여 키 누락 문제를 해결한다.

  function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
  }
  

const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );

<br>

🛠️ **리팩토링 - 전체 코드**

!codepen[gaearon/embed/jMXYRR?default-tab=html%2Cresult]

<br>

## key
key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

⚙️ **예시 코드 - 1**
```javascript
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

Key를 성택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 대부분의 경우 데이터의 ID를 key로 사용한다.

⚙️ 예시 코드 - 2

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있다.

⚙️ 예시 코드 - 3

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는것은 권장하지 않는 방법이다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있다.

리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용한다.

Key로 컴포넌트 추출하기

key는 주변 배열의 context에서만 의미가 있다.

예를 들어, ListItem 컴포넌트를 추출한 경우 ListItem 안에 있는 <li> 엘리먼트가 아니라 배열의 <ListItem /> 엘리먼트가 key를 가져야 한다.

🛑 잘못된 Key 사용법

function ListItem(props) {
  const value = props.value;
  return (
    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 틀렸습니다! 여기에 key를 지정해야 합니다.
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

✅ 올바른 Key 사용법

function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

!codepen[gaearon/embed/ZXeOGM?default-tab=js%2Cresult]

Key는 형제 사이에만 고유한 값이어야 함

Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다. 두개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

!codepen[gaearon/embed/NReYGN?default-tab=js%2Cresult]

React에서 key는 힌트를 제공하지만 컴포넌트로 전달하지는 않는다. 컴포넌트에서 key와 동일한 값이 필요하면 다른 이름의 prop으로 명시적으로 전달한다.

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

위 예시에서 Post 컴포넌트는 props.id를 읽을 수 있지만 props.key는 읽을 수 없다.

JSX에 map() 포함시키기

위 예시에서 별도의 listItems 변수를 선언하고 이를 JSX에 포함하면 다음과 같다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

JSX를 사용하면 중괄호 안에 모든 표현식을 포함시킬 수 있으므로 map()함수의 결과를 인라인으로 처리할 수 있다.

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}

!codepen[gaearon/embed/BLvYMB?default-tab=js%2Cresult]

이 방식을 사용하면 코드가 더 깔끔해 지지만, 이 방식을 남발하는 것은 좋지 않다. JavasScript와 마찬가지로 가독성을 위해 변수로 추출해야 할지 아니면 인라인으로 넣을지는 개발자가 직접 판단해야 한다.

✨ map() 함수가 너무 중첩된다면 컴포넌트로 추출하는 것이 좋다.

🔎 React 공식문서 자료 React_조건부 렌더링

React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있다.

📖 캡슐화??

• 정보통신기술용어해설_캡슐화
• wikipedia_캡슐화
• 객체 지향 프로그래밍(OOP; Object-Oriented-Programming)의 특징
• 데이터(변수) 및 함수(처리방법, 메소드)를 클래스로 묶는 작업
• 임의의 객체 요소의 접근을 제한 ▶ 메소드나 프로퍼티 앞에 붙여 다른 객체에게 노출시키는 정도로써의 보호수준을 결정하는 제한자
• 정보 은닉 : 내부 데이터를 캡슐화시켜 변경을 어렵게하고 보호함

React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다. if나 조건부 연산자와 같은 JavaScript 연산자를 현재 상태를 나타내는 에리먼트를 만드는 데에 사용해야 한다. 그러면 React는 현재 상태에 맞게 UI를 업데이트 한다.

⚙️ 예시 코드 - 1

• props 값을 받아서 상황에 따라 바뀌는 컴포넌트 2개를 생성

  function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
  }
  

function GuestGreeting(props) { return

Please sign up.

<br>

⚙️ **예시 코드 - 2**
- true : `UserGreeting` 컴포넌트 렌더링
- false : `GuestGreeting` 컴포넌트 렌더링
```javascript
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

엘리먼트 변수

엘리먼트를 저장하기 위해 변수를 사용할 수 있다. 출력의 다른 부분은 변하지 않은 채로 컴포넌트의 일부를 조건부로 렌더링할 수 있다.

⚙️ 예시 코드 - 1

• 로그아웃을 나타내는 LogoutButton 컴포넌트
• 로그인을 나타내는 LoginButton 컴포넌트

  function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
  }
  

function LogoutButton(props) { return ( Logout ); }

<br>

⚙️ **예시 코드 - 2**
- 현재 상황에 따라 `<LoginButton />` 혹은 `<LogoutButton />` 컴포넌트로 렌더링
- 이전 예시의 `<Greeting />` 컴포넌트도 함께 렌더링
- 변수를 선언하고 `if`를 사용해서 조건부로 렌더링
```javascript
// ✨ 클래스형 컴포넌트 생성
class LoginControl extends React.Component {
  // 클래스 객체 생성 & 초기화
  constructor(props) {
    // 부모 클래스를 물려받음 (즉, 부모 클래스를 사용하기 위해 super 사용)
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      // true
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      // false
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

논리 && 연산자로 if를 인라인으로 표현하기

JSX 안에는 중괄호를 이용해서 표현식을 포함할 수 있다. 그 안에 JavaScript의 논리 연산자 &&를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있다.

⚙️ 예시 코드 - 1

• JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 flase로 평가된다. 따라서 && 뒤의 엘리먼트는 조건이 true일 때 출력된다. 조건이 false라면 React는 무시하고 건너뛰게 된다.
• true && expression
• false && expression

⚙️ 예시 코드 - 2

• falsy 표현식을 반환하면 여전히 && 뒤에 표현식은 건너뛰지만 falsy 표현식이 반환됨다는 것에 주의해야 한다.
• 아래 코드는 <div>0</div>이 render 메서드에서 반환된다.

  render() {
  const count = 0;
  return (
    // {0 && <h1>Messages: {count}</h1>}
    // 🛑 falsy값 0이 들어가면 falsy값을 반환!!
    <div>
      {count && <h1>Messages: {count}</h1>}
    </div>
  );
  }

조건부 연산자로 if-else 구문 인라인으로 표현하기

엘리먼트를 조건부로 렌더링하는 다른 방법은 조건부 연산자인 condition ? true : false를 사용한다. (삼항 조건 연산자를 사용하자!)

⚙️ 예시 코드 - 1

• 삼항 조건 연산자를 이용하면 다음과 같은 코드로 작성할 수 있다.

  render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    // true ▶ currently 반환
    // false ▶ not 반환
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
  }

⚙️ 예시 코드 - 2

• 예시 코드 - 1보다 더 큰 표현식을 사용하면 다음과 같은 코드를 작성할 수 있다.

  render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    // true ▶ <LogoutButton onClick={this.handleLogoutClick} /> 반환
    // false ▶ <LoginButton onClick={this.handleLoginClick} /> 반환
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
  }

두 예시 코드 중에서 가독성이 좋다고 생각하는 것을 선택하면 된다. 즉, 본인의 취향이다. 만약 조건이 너무 복잡하다면 컴포넌트 분리를 사용하는 것이 효율적이다.

컴포넌트가 렌더링하는 것을 막기

가끔 다른 컴포넌트에 의해 렌더링될 때 컴포넌트 자체를 숨기고 싶을 때가 있다. 이때는 렌더링 결과를 출력하는 대신 null을 반환하면 된다.

⚙️ 예시 코드 - 1

• <WarningBanner />가 warn prop의 값에 의해서 렌더링된다.

• prop이 false라면 컴포넌트는 렌더링하지 않는다.

  function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  
  return (
    <div className="warning">
      Warning!
    </div>
  );
  }
  

class Page extends React.Component { constructor(props) { super(props); this.state = {showWarning: true}; this.handleToggleClick = this.handleToggleClick.bind(this); }

handleToggleClick() { this.setState(state => ({ showWarning: !state.showWarning })); }

render() { return (

ReactDOM.render( , document.getElementById('root') );

```

!codepen[gaearon/embed/Xjoqwm?default-tab=js%2Cresult]

컴포넌트의 render 메서드로부터 null을 반환하는 것은 생명주기 메서드 호출에 영향을 주지 않는다. 그 예로 componentDidUpdate는 계속해서 호출되게 된다.

🔎 React 공식문서 자료 React_이벤트 처리하기

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 몇 가지 문법 차이는 다음과 같다.

• React의 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

⚙️ *HTML 코드 *

<button onclick="activateLasers()">
  Activate Lasers
</button>

⚙️ React 코드

<button onClick={activateLasers}>
  Activate Lasers
</button>

또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야 한다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있다.

⚙️ HTML 코드

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

⚙️ React 코드

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

여기서 e는 합성 이벤트이다. React는 W3 명세에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없다. React 이벤트는 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않는다.

React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 된다.

ES6 클래스를 사용하여 컴포넌트를 정의할 깨, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것이다. 예를 들어, 다음 Toggle 컴포넌트는 사용자가 ON과 OFF 상태를 토글할 수 있는 버튼을 렌더링한다.

!codepen[gaearon/embed/xEmzGg?default-tab=js%2Cresult]

✨ bind?

• bind() 메소드가 호출되면 새로운 함수를 생성
• 받게 되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공

JSX 콜백 안에서 this의 의미에 대해 쥐의해야 한다. JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않다. this.handleClick을 바인딩하지 않고 onClick에 전달하였다면, 함수가 실제 호출될 때 this는 undefined가 된다.

이는 React만의 특수한 동작이 아니며, JavaScript에서 함수가 작동하는 방식의 일부이다. 일반적으로 onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 바인딩 해야 한다.

bind를 호출하는 것이 불편하다면, 이를 해결할 수 있는 두 가지 방법이 존재한다.

🔎 퍼블릭 클래스 필드 문법 ⭕

• 클래스 필드를 사용하여 콜백을 올바르게 바인딩할 수 있다.

• Create-React-App에서는 이 문법이 기본적으로 설정되어 있다.

  class LoggingButton extends React.Component {
  // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
  // 주의: 이 문법은 *실험적인* 문법입니다.
  handleClick = () => {
    console.log('this is:', this);
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
  }

🔎 퍼블릭 클래스 필드 문법 ❌

• 클래스 필드 문법을 사용하고 있지 않다면, 콜백에 화살표 함수를 사용한다.

  class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
  
  render() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
  }

이 문법의 문제점은 LogginButton이 렌더링될 때마다 다른 콜백이 생성된다. 대부분의 경우 문제가 되지 않으나, 콜백이 하위 컴포넌트에 props로서 전달된다면 그 컴포넌트들은 추가로 다시 렌더링을 수행할 수 도 있다. 이러한 종류의 성능 문제를 피하고자, 생성자 안에서 바인딩하거나 클래스 문법을 사용하는 것을 권장한다.

이벤트 핸들러에 인자 전달하기

루프 내부에서는 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적이다. 예를 들어, id가 행의 ID일 경우 다음 코드가 모두 작동한다.

// ▶ 두 코드는 서로 동등함!
// ⚙️ 화살표 함수 코드
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

// ⚙️ Funtion.porototype.bind 코드
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

두 경우 모두 React 이벤트를 나타내는 e 인자가 ID 뒤에 두 번째 인자로 전달된다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind를 사용할 경우 추가 인자가 자동으로 전달된다.

🔎 React 공식문서 자료 React_State and Lifecycle

⚙️ 예시 코드 - 1

• 엘리먼트 렌더링에서 UI를 업데이트
• 렌더링 된 출력값을 변경하기 위해 ReactDOM.render()를 호출

  function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
  }
  

setInterval(tick, 1000);

<br>

⚙️ **예시 코드 - 2**
- `Clock` 컴포넌트를 완전히 재사용하고 캡슐화
- 컴포넌트가 스스로 타이머를 설정하고 매초 스스로 업데이트
```javascript
function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

⚙️ 예시 코드 - 3

• 예시코드 - 2에는 중요한 요건이 누락되어 있다. Clock이 타이머를 설정하고 매초 UI를 업데이트하는 것이 Clock의 구면 세부사항이 되여야 한다.
• 이상적으로 한 번만 코드를 작성하고 Clock이 스스로 업데이트 업데이트하도록 만들려면 state를 추가해야 한다.
• state는 props 와 유사하지만, 비공개이며 컴포넌트에 위해 완전히 제어된다.

  ReactDOM.render(
  <Clock />,
  document.getElementById('root')
  );

함수에서 클래스로 변환하기

✨ 함수 컴포넌트 ▶ 클래스 컴포넌트 변환 과정

1. React.Component를 확장하는 동일한 이름의 ES6 class를 생성
2. render()라고 불리는 빈 메서드 추가
3. 함수의 내용을 render() 메서드 안으로 옮김
4. render() 내용 안에 있는 props를 this.props로 변경
5. 남아있는 빈 함수 선언을 삭제

!codepen[gaearon/embed/zKRGpo?default-tab=js%2Cresult]

⚙️ 클래스 컴포넌트로 정의된 코드

• Clock은 클래스 컴포넌트로 정의!!
• render메서드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM노드로 <Click />을 렌더링하는 경우 Clock클래스의 단일 인스턴스만 사용된다. 이것은 로컬 state와 생명주기 메서드와 같은 부가적인 기능ㄹ 사용할 수 있게 해준다.

  class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
  }

클래스에 로컬 State 추가하기

✨ props ▶ state 변환 과정

1. render() 메서드 안에 있는 this.props.date를 this.state.date로 변경

   class Clock extends React.Component {
   render() {
    return (
      <div>
        <h1>Hello, world!</h1>
          // props ▶ state
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
   }
   }

2. 초기 this.state를 지정하는 class constructor를 추가

   // class 키워드 추가
   class Clock extends React.Component {
   // 🔎 constructor
   // - class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드
   // - class 안에 단 1개만 존재 ▶ 여러 개가 존재하면 문법오류(SyntaxError)
   // - 부모 클래스의 constructor를 호출하기 위해 super 키워드를 사용
   
   // 🛑 클래스 컴포넌트는 항상 props로 기본 constructor를 호출
   constructor(props) {
    super(props);
    this.state = {date: new Date()};
   }
   
   render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
   }
   }

3. <Clock /> 요소에서 date props을 삭제

   ReactDOM.render(
   <Clock />,
   document.getElementById('root')
   );

⚙️ 완성 코드

• clock이 스스로 타이머를 설정하고 매초 스스로 업데이트하도록 코드를 수정

!codepen[gaearon/embed/KgQpJd?default-tab=js%2Cresult]

생명주기 메서드를 클래스에 추가하기

많은 컴포넌트가 있는 애플리케이션에서 컴포넌트가 삭제될 때 해당 컴포넌트가 사용 중이던 리소스를 확보하는 것이 중요하다.

⚙️ 생명주기 메서드

• Clock이 처음 DOM에 렌더링 될 때마다 타이머를 설정 ▶ 마운팅(Mountimg)

• Clock에 의해 생성된 DOM이 삭제될 때마다 타이머를 해제 ▶ 언마운팅(Unmounting)

  class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  
  componentDidMount() {
  }
  
  componentWillUnmount() {
  }
  
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
  }

✅ ComponentDidMount()

• 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행
• 즉, 컴포넌트 업데이트가 끝나면 호출

  // 타이머 설정
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

✅ componentWillUnmount()

• 컴포넌트가 사라지기 전에 호출

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

this.timerID 사용을 주의해야한다.

this.props가 React에 의해 스스로 설정되고 this.state가 특수한 의미가 있지만, 타이머 ID와 같이 데이터 흐름안에 포함되지 않는 어떤 항목을 보관할 필요가 있다면 자유롭게 클래스에 수동으로 부가적으로 필드를 추가해도 된다.

⚙️ 최종 코드

• 컴포넌트 로컬 state를 업데이트하기 위해 this.setState()를 사용

!codepen[gaearon/embed/amqdNr?default-tab=js%2Cresult]

✨ 최종 코드 : 호출 순서

1. <Clock />가 ReactDOM.render()로 전달되었을 때 React는 Clock 컴포넌트의 constructor를 호출 → Clock이 현재 시각을 표시해야 하기 때문에 현재 시각이 포함된 객체로 this.state를 초기화 & 나중에 state를 업데이트

2. React Clock 컴포넌트의 render() 메서드 호출 → React는 화면에 표시되어야 할 내용을 확인 → React는 Clock의 렌더링 출력값을 일치시키기 위해 DOM 업데이트

3. Clock 출력값이 DOM에 삽입 → React는 componentDidMount() 생명 주기 메서드 호출 → Clock 컴포넌트는 매초 컴포넌트의 tick() 메서드를 호출하기 위한 타이머를 설정하도록 브라우저 요청

4. 매초 브라우저가 tick() 메서드를 호출 → Clock 컴포넌트는 setState()에 현재 시각을 포함하는 객체를 호출 & UI 업데이트 → setState()호출 덕분에 React는 변경을 감지 & 화면에 표시될 내용을 알아내기 위해 render() 메서드를 재호출 → render() 메서드 안의 this.state.date가 달라지고 렌더링 출력값은 업데이트된 시작을 포함 → React는 이에 따라 DOM을 업데이트

5. Clock 컴포넌트가 DOM으로부터 한 번이라도 삭제된 적이 딨으면 React는 타이머를 멈추기 위해 componentWillUnmount() 생명주기 메서드 호출

State를 올바르게 사용하기

setState()를 사용하기 위해 알아야할 세 가지가 있다.

✨ 직접 State를 수정하지 않는다.

// Wrong ▶ 컴포넌트를 다시 렌더링 하지 않음
this.state.comment = 'Hello';

// Correct ▶ this.state를 지정할 수 있는 유일한 공간은 constructor
this.setState({comment: 'Hello'});

✨ state 업데이트는 비동기적일 수도 있다. React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리할 수 있다.

this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안 된다.

다음 코드는 카운터 업데이트에 실패한 경우이다.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

위 코드를 수정하기 위해 객체보다는 함수를 인자로 사용하는 다른 형태의 setState()를 사용해야 한다. 그 함수는 이전 state를 첫 번째 인자로 받아들일 것이고, 업데이트가 적용된 시점의 props를 두 번째 인자로 받아들일 것이다

// ▶ 화살표 함수 (arrow function)
// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

// ▶ 일반 함수 (function)
// Correct
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

✨ state 업데이트는 병합된다. setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합한다.

state는 다양한 독립적인 변수를 포함할 수 있다.

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

별도의 setState() 이러한 변수를 독립적으로 업데이트할 수 있다.

componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

병합은 얕게 이루어지기 때문에 this.setState({comments})는 this.state.posts에 영향을 주진 않지만 this.state.comments는 새로운 값으로 대체된다.

✨ 데이터는 아래로 흐른다. 부모 컴포넌트나 자식 컴포넌트 모두 측정 컴포넌트가 유 상태인지 또는 무 상태인지 알수 없고, 그들이 함수나 클래스로 정의되었는지에 대해 관심을 가질 필요가 없다.

이 때문에 state는 종종 로컬 또는 캡슐화라고 불린다. state가 소유하고 설정한 컴포넌트 이외에는 어떠한 컴포넌트에도 접근할 수 없다.

컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.

<FormattedDate date={this.state.date} />

FormatteedDate 컴포넌트는 date를 자신의 props로 받을 것이고 이것이 Clock의 state로부터 왔는지, Clock의 props에서 왔는지, 수통으로 입력한 것인지 알지 못한다.

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

일반적으로 이를 하향식(top-dwon) 또는 단방향식 데이터 프흠이라고 한다. 모든 state는 항상 특정한 컴포넌트가 소유하고 있으며 그 state로 부터 파생된 UI 또는 데이터는 오직 트리구조에서 자신의 아래에 있는 컴포넌트에만 영향을 미친다.

트리구조가 props들의 폭포라고 상상하면 각 컴포넌트의 state는 임의의 점에서 만나지만 동시에 아래로 흐르는 부가적인 수원(water source)이라고 할 수 있다.

모든 컴포넌트가 완전히 독립적이라는 것을 보여주기 위해 App 렌더링 하는 세 개의 <Clock> 예시 코드이다.

function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

각 Clock은 자신만의 타이머를 설정하고 독립적으로 업데이트를 한다.

React 앱에서 컴포넌트가 유상태 또는 무상태에 대한 것은 시간이 지남에 따라 변경될 수 있는 구현 세부 사항으로 간주한다. 유상태 컴포넌트 안에서 무상태 컴포넌트를 사용할 수 있으며, 그 반대 경우도 마찬가지로 사용할 수 있다.

🔎 React 공식문서 자료 React_Components와 Props

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

개념적으로 컴포넌트는 JavaScript 함수와 유사하다. props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

함수 컴포넌트와 클래스 컴포넌트

📑 참고자료 React : Components devowen_[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

⚙️ 함수형 컴포넌트

• ES6 화살표 함수(arrow function)로 컴포넌트 정의 가능
• 클래스형 컴포넌트보다 선언하기 쉽고, 메모리 자원을 덜 사용
• return을 이용하여 JSX 반환
• Hook을 이용하면 클래스 컴포넌트의 기능을 사용할 수 있음 ▶ state, life cycle, render()함수, ...

  // ✨ 일반 function 정의
  // 자신이 종속된 객체를 this로 가리킴
  function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
  }
  

// ✨ arrow function정의 // 자신이 종속된 인스턴스를 가리킴 const Welcome = (props) => { return

Hello, {props.name}

<br>

⚙️ **클래스 컴포넌트**
- ES6 class를 이용하여 컴포넌트를 정의
- `extends React.Component` 속성 포함 ▶ 컴포넌트를 상속 받음
- `render()`함수를 이용하여 JSX 반환
- `props` 접근 시 `this` 키워드 사용
```javascript
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

🛑 React 관점

• React 관점으로 볼 때 함수형과 클래스 유형은 동일하다.

컴포넌트 렌더링

⚙️ DOM 태그만 사용한 React 엘리먼트

const element = <div />;

⚙️ 사용자 정의 컴포넌트를 사용한 React 엘리먼트

• React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달
• 이 객체를 props라고 함

  const element = <Welcome name="Sara" />;

⚙️ 코드 예시

1. <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출
2. React는 {name: 'Sara'}를 props로 하여 사용자 정의 Welcome 컴포넌트를 호출
3. Welcome 컴포넌트는 props를 받아 <h1>Hello, Sara</h1>를 반환
4. ReactDOM은 <h1>Hello, Sara</h1>엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

!codepen[gaearon/embed/YGYmEG?default-tab=js%2Cresult]

🛑 컴포넌트의 이름

• 컴포넌트의 첫 문자는 항상 대문자로 시작
• ex) Welcome ⭕, welcome ❌

컴포넌트 합성

컴포넌트는 자심의 출력에 다른 컴포넌트를 참조할 수 있다. 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미한다. React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현된다.

⚙️ 예시 코드

• Welcome컴포넌트를 여러 번 렌더링하는 App컴포넌트

!codepen[gaearon/embed/KgQKPM?default-tab=js%2Cresult]

컴포넌트 추출

⚙️ 예시 코드 - 1

• 컴포넌트를 여러 개의 작은 컴포넌트로 나눔
• props 반영 : author, text, date
• 중첩 구조 : 변형과 재사용이 어려움 !codepen[gaearon/embed/VKQwEo?default-tab=js%2Cresult]

⚙️ 예시 코드 - 2

• Avatar 컴포넌트

  function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
  }

• UserInfo 컴포넌트

  function UserInfo(props) {
  return (
   <div className="UserInfo">
     <Avatar user={props.user} />
     <div className="UserInfo-name">
       {props.user.name}
     </div>
   </div>
  );
  }

⚙️ 예시 코드 - 3

• 컴포넌트 추출 → 재사용 가능한 컴포넌트 생성
• UI가 여러 번 사용되거나, UI 일부가 자체적으로 복잡한 경우 별도의 컴포넌트를 생성하는게 좋음
• 규모가 큰 작업을 할 때 두각을 나타냄

!codepen[gaearon/embed/MjQWQO?default-tab=js%2Cresult]

props는 읽기 전용

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트 자체에서 props를 수정할 수 없다.

⚙️ 예시 코드 - 1

• 순수 함수 ⭕
• 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환

  function sum(a, b) {
  return a + b;
  }

⚙️ 예시 코드 - 2

• 순수 함수 ❌
• 자신의 입력값을 변경하기 때문에 순수 함수가 아님

  function withdraw(account, amount) {
  account.total -= amount;
  }

✨ props를 사용할 경우 주의 사항

• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 함!!

🔎 React 공식문서 자료 React_엘리먼트 렌더링

엘리먼트는 React 앱의 가장 작은 단위를 말하며, 화면에 표시할 내용을 기술한다.

const element = <h1>Hello, world</h1>;

브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(plain object)이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.

DOM에 엘리먼트 렌더링하기

⚙️ 루트 노드

<div id="root"></div>

• root DOM 노드라고 부른다.
• 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리한다.

⚙️ 엘리먼트

const element = <h1>Hello, world</h1>;

⚙️ 루트 노트에 렌더링

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

• React 엘리먼트를 루트 DOM노드에 렌더링하려면 ReactDOM.render()로 전달한다.

🔎 코드 예시

!codepen[gaearon/embed/edyBaE?default-tab=js%2Cresult]

렌더링 된 엘리먼트 업데이트하기

React 엘리먼트는 불변 객체이다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 즉, 하나의 프레임과 같이 특정 시점의 UI만 보여준다.

UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 ReactDOM.render()로 전달하면 된다.

🔎 코드 예시

• setInterval()콜백을 이용해 초마다 ReactDOM.render()를 호출한다. !codepen[gaearon/embed/gwoJeZ?default-tab=js%2Cresult]

변경된 부분만 업데이트하기

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다.

즉, 매번 똑같은 것을 업데이트하는 것이 아닌 엘리먼트를 서로 비교하여 변경된 부분만 업데이트를 한다.

⚙️ <h2>It is {new Date().toLocaleTimeString()}.</h2>

• React DOM은 내용이 변경된 텍스트 노드만 업데이트 한다.
• 이 태그에서는 {new Date().toLocaleTimeString()}부분이 setInterval()함수로 계속 바뀌고 있다. ▶ 이 부분만 업데이트!!

🔎 React 공식문서 자료 React_JSX 소개

🔷 소개

const element = <h1>Hello, world!</h1>;

• Javascript를 확장한 문법
• Javascript의 모든 기능 포함
• UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장

JSX란?

📖 참고자료 더북_리액트를 다루는 기술 [개정판]

JSX는 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼다.

아래와 같이 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태로 코드를 변환한다.

⚙️ JSX

function App() {
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}

⚙️ JSX 코드 변환

function App() {
return React.createElement(“div“, null, “Hello “, React.createElement(“b“, null, “react“));
}

컴포넌트를 렌더링할 때마다 JSX코드로 작성하는 것이 아니라 React.createElement처럼 작성하면 불편하고 번거롭다.

JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있다. 또한, React가 에러 및 경고 메시지를 표시할 수 있게 한다.

JSX에 표현식 포함하기

⚙️ 코드 예시 - 1

// name 변수 선언
const name = 'Josh Perez';

// {중괄호}로 변수 name을 감싸 JSX안에 코드 작성
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

⚙️ 코드 예시 - 2

// formatName 함수 생성 → user 객체를 받아서 값을 반환
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

// user 객체 생성
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

// {중괄호}로 감싸서 JSX안에 작성
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

// ✨ 출력값
// Hello, Harper Perez!
ReactDOM.render(
  element,
  document.getElementById('root')
);

✨ JSX도 javascript 문법인가요?!

• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• Babel을 이용하면 개발자들이 임의로 만든 문법 또는 차기 자바스크립트 문법들을 사용할 수 있다.

JSX 표현식

컴파일이 끝나면, JSX 표현식이 정규 Javascript를 호출하고 Javascript 객체를 인식한다.

즉, JSX도 if문 및 for loop, 변수 할당, 인자값 받기, 함수 반환을 할 수 있다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 속성 정의

⚙️ 코드 예시

// 어트리뷰트에 "따옴표"를 이용해 문자열 리터럴 정의 가능
const element = <a href="https://www.reactjs.org"> link </a>;

//  {중괄호}를 사용하여 어트리뷰트에 Javascript 표현식 사용 가능
const element = <img src={user.avatarUrl}></img>;

🛑 주의

• JSX는 HTML보다 Javascript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase(카멜 케이스)규칙을 사용한다.
• 예를 들어, JSX에서 class는 className으로 작성한다.

JSX 자식 정의

⚙️ 코드 예시

// 태그가 비어있다면 XML처럼 /를 이용하여 태그를 닫아줌 ▶ 닫힌 태그
const element = <img src={user.avatarUrl} />;

// JSX 태그는 자식 포함 가능
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
)

JSX 주입 공격 방지

애플리케이션에서 명시적으로 작성되지 않은 내용은 주입하지 않는다. 모든 항목은 렌더링 되기 전에 문자열로 변환된다. 이러한 특성으로 XSS(Cross-Site-Scripting)공격을 방지할 수 있다.

const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;

✨ XSS(Cross-Site-Scripting)

• 사이트 간 스크립팅 or 크로스 사이트 스크립팅이라고 한다.
• 웹 애플리케이션의 취약점 ▶ 관리자가 아닌 사람이 웹 페이지에 악성 스크립트를 삽입
• 이 취약점으로 해커가 사용자의 정보(쿠키, 세션 등)을 탈취, 자동으로 비정상적인 기능을 수행하게 한다.
• 공격 유형 : 비 지속적(Non-pesistent) & 지속적(persistent) 기법

JSX는 객체를 표현

Babel은 JSX를 React.createElement()호출로 컴파일한다.

// ✨ 모두 동일한 코드!
// ex1
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// ex2
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()는 버그가 없는 코드를 작성하는데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 아래와 같은 객체를 생성한다.

// 🛑 주의 : 단순화된 구조
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

이러한 객체를 React 엘리먼트라고 하며, 화면에서 보고 싶은 것을 나타내는 표현한다. React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용한다.

🛑 주의

• ES6 및 JSX 코드가 올바르게 표시되도록 편집기에 Babel언어 설정을 사용하는 것을 권장

✨ Babel

📖 참고자료 BABEL 공식문서_What is Babel?

Babel은 Javascript Compiler이다.

즉, 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다.

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

정리

⚙️ JSX 장점

• 보기 쉽고 익숙하다.
• 활용도가 높다. 1. HTML 태그에서 사용 가능 2. 컴포넌트 안에서 JSX 사용 가능

🌺 Comment

리액트 공식 문서를 보면서 기초를 탄탄하게 만들어 보자..!! ╰(°▽°)╯

🗃️ 강의 K-MOOC 자료구조

개요

🔶 Data structure

• 자료구조 : 자료를 효율적으로 관리하는 기법
• 자료(data), 관리(manipulation), 기법(technique), 효율적(efficiency)
• 리스트(list)/트리(tree) + 그래프(graph)

자료와 관리

자료(data)는 무엇인가?

⚙️ 자료(data)

• 컴퓨터에 저장할 수 있는 모든 값
• 컴퓨터에서 허용하는 형태의 값만 저장할 수 있음 ▶ 자료형

⚙️ 자료형(data type)

• 컴퓨터에 저장할 수 있도록 프로그래밍 언어에서 미리 정의된 값들의 집합 1. 시스템에서 제공하는 자료형 2. 사용자가 정의하는 자료형

⚙️ 시스템에서 제공하는 자료형(system-defined data type)

• 자료의 단위

• 자료의 구성 1. 세상의 모든 자료는 문자와 숫자로 구성 2. 문자 → char 3. 숫자 → 정수(int) or 실수(float)

• char(문자 표현)

• int(정수 표현) 1. 4 byte를 사용 (시스템에 따라서 다름) 2. short(2 bytes), long(4 bytes), unsigned int(4 bytes)등과 같은 다양한 정수 자료형이 존재함 3. 음수표현 ▶ 부호비트(sign bit), 1의 보수, 2의 보수

• float(실수 표현) : 부동 소수점(floating point)

⚙️ 사용자 정의 자료형(user-defined data type)

• 하나의 자료는 다양한 자료형을 가진 요소들의 집합으로 표현될 수 있음
• 즉, 새로운 자료응 정의하기 위한 자료형으로 사용할 수 있도록 하는게 사용자 정의 자료형

관리란 무엇인가?

⚙️ 자료의 관리

• 추가(insert), 삭제(delete), 검색(search), 갱신(modify) 등 많은 관리 작업이 가능
• 가장 중요한 연산 : 추가, 삭제, 검색
• 추가와 삭제는 1번만 사용 가능
• 검색은 매우 빈번하게 사용 : 가장 중요한 관리 작업은 ✨검색✨

⚙️ 검색의 3가지 종류

• 주어진 집합에서 임의의 원소를 찾아라 ▶ find arbitrary
• 주어진 집합에서 가장 먼저/즙게 온 원소를 찾아라 ▶ find earliest/last
• 주어진 집합에서 최대/최소인 원소를 찾아라 ▶ find top

🌺 Comment

자료구조도 다시 복습.. 달려달려..! ╰(°▽°)╯

✨단원 기준 : KMOOC 기준으로 작성✨