[React] Udemy 강의 노트 3-4

 

 

컴포지션의 개념 chlidren prop

- 리액트에서는 컴포넌트가 가장 중요하다. 이런 컴포넌트에 추가할 수 있는 기능에 대해 배운다.

- 컴포넌트는 아주 중요하다.

- 컴포넌트 안으로 데이터를 전달하기 위한 props도 중요하다.

- 컴포넌트는 JSX 코드를 결합한 사용자 정의 HTML이고 스타일링이다.

- 원한다면 자바스크립트 로직을 추가할 수 있다.

- props를 통해 모든 것을 설정하는 컴포넌트가 아니라 열고 닫는 태그 사이에 컨텐츠를 전달하고 싶을 때가 있다.

- 사용자 지정 컴포넌트를 일종의 컨텐츠를 감싸는 래퍼Wrapper로 사용할 수 없다.

- 내장된 HTML 요소인 div나 h2는 사용 가능하다.

- chlidren은 예약어이다.

- props.children의 값은 사용자 지정 컴포넌트의 열고 닫는 태그 사이에 있는 컨텐츠이다.

- Card 사이에 있는 컨텐츠는 Card 안에 있는 props.children에서 사용 가능하다.

- 사용자 정의 컴포넌트들은 우리가 지원하라고 지시한 className만 지원한다.

- 그래서 className이 지원되고 영향을 미치기 원한다면 클래스에 상수로 지정해주어야 한다.

- 이렇게 재사용 할 수 있는 wrapper component를 만들 수 있다.

- css 파일에서 이 별도의 래퍼 컴포넌트로 일부 중복되는 코드를 추출할 수 있다.

- 그리고 단지 중복된 코드뿐만 아니라 JSX도 추출할 수 있다.

- 모달이나 경고창 같은 것을 추출하고, 추출이 가능하다는 것은 코드 중복을 피할 수 있게 해주고 다른 컴포넌트를 클린하게 유지하게 한다.

- 이것이 합성으로 모든 컴포넌트와 요소들이 다 같이 모여서 하나의 컴포넌트를 생성한다.

- 전체적인 사용자 인터페이스를 구축하기 위해 재사용된다.

 

첫 번째 요약

- 이번 섹션은 컴포넌트를 설명

- 컴포넌트를 만들고 결합해서 사용자 인터페이스를 구축하는 리액트의 가장 중요한 개념을 이해하는 것

- 리액트의 중요 문법과 JSX

- 컴포넌트와 props로 구축하기

- props를 이용해서 컴포넌트 끼리 데이터를 공유하는 방법 

 

JSX 자세히 보기

- 개발자 도구에서 sources를 확인하면 JSX코드를 번역해주는 파일을 볼 수 있다.

- JSX코드가 실제로 뒤에서 표현하는 것을 살펴보자.

- 리액트와 관련있는 두 가지 종속요소를 가지고 있는데 React와 React-dom이다.

- 어디에서도 react를 임포트 하지 않았다.

- 대부분 리액트를 임포트 한다.

- 오래된 버전의 리액트 프로젝트에서는 import React from 'react'가 필요했다.

- 하지만 이제 이 import는 생략할 수 있다.

- 리액트에서는 호출된 두 가지 메서드가 있다.

- 임포트된 리액트 객체에는 호출할 수 있는 createElement() 메소드가 있다.

- 이 메소드는 3개의 인자를 갖는다.

- 요소(태그)와 태그의 속성(객체로-없으면 {}), 태그 사이의 컨텐츠이다.

- 아래와 같은 이미지가 JSX를 작성하면 자동적으로 생성되는 코드였다.

- 프로젝트 셋업에서 추가되는 react 임포트가 없어도 사용될 수 있다.

- 아래와 같이 React.creaeteElement로 표현되기 때문에 리액트 JSX 구문에서는 반드시 루트 요소가 필요한 것이다. (하나 이상을 반환할 수 없다.)

컴포넌트 파일 구성하기

- 많은 컴포넌트를 가지면 하위 폴더를 만들고 싶어진다.

- 앱의 특정 기능과 관련이 없는 일반적인 사용자 인터페이스 영역과 특정 기능을 가진 컴포넌트를 하위 폴더로 분류할 수 있다.

 

 

대체 함수 문법 (syntax)

- 모든 모던 자바스크립트 응용프로그램에서 적용 가능하다.

- 화살표 함수로 작성할 수 있다.

- function 보다 짧다.

 

퀴즈

 

1. React.js에서는 어떤 유형의 코드로 작성하나요?

- 선언형 Declarative Javascript 코드

 

2. JSX란 무엇일까요?

- React 프로젝트에서만 활성화되는 특수한 비표준 구문이다.

(“create-react-app”으로 생성한 React 프로젝트와 같이 React 프로젝트는 JSX 구문을 지원합니다. 백그라운드에서 표준 JS 코드로 컴파일돼요.)

 

3. 왜 “컴포넌트”를 React의 모든 것이라고 할까요?

- 모든 UI는 결국 여러 빌딩 블록(='컴포넌트')으로 구성되며, 따라서 사용자 인터페이스를 "컴포넌트의 조합"이라고 생각할 수 있다.

( “컴포넌트”는 사용자 인터페이스에 관한 사고 방식일 뿐입니다. React는 이러한 개념을 아우르며 컴포넌트를 구축할 수 있는 도구를 제공합니다.)

 

4. “선언형”은 무슨 뜻인가요?

- 원하는 결과(대상 UI 등)을 정의하고 라이브러리(React)가 단계를 구성한다.

(대상의 “상태(UI)”를 정의하면 해당 결과를 얻기 위해 어떤 JS 명령어를 실행해야 하는지를 React가 특정합니다.)

 

5. “React 컴포넌트”란 무엇일까요?

- 일반적으로 표시되어야 하는 HTML(JSX) 코드를 반환하는 Javascript 함수이다.

(컴포넌트란 일반적으로 해당 컴포넌트가 사용될 때 화면에 표시되는 HTML(정확히는 JSX) 코드를 반환하는 JS 함수를 말합니다.)

 

6. React 앱은 커스텀 React 컴포넌트를 몇 개 가져야 하나요?

- 사용자 마음대로 

 

7. 다음 중 올바른 문장은 무엇인가요?

- React를 사용해서 DOM 노드에 마운트되는 하나의 루트 컴포넌트를 가진 트리를 구축합니다.

 

8. "컴포넌트 트리"란 무엇을 뜻하나요?

- 루트 노드 아래에 여러 컴포넌트가 중첩되어 있는 것을 뜻한다.

(표준 HTML 문서를 구축할 때 HTML 트리를 구축하는 것처럼 컴포넌트를 서로 중첩해 트리를 구축합니다.)

 

9. 어떻게 컴포넌트 간에 데이터를 전달하나요?

- "프로퍼티"라고 잘 알려진 "커스텀 HTML 속성"을 통해

(고유한 “HTML 요소”를 구축하므로 고유한 속성(React에서는 “프로퍼티”라고 함)을 정의할 수도 있죠.)

 

10. React 컴포넌트 내부의 동적 데이터(반환된 JSX 코드)는 어떻게 출력하나요?

- 아무 JS 표현식을 단일 중괄호 ({}, 여닫음)로 감싸 사용한다.

(중괄호 사이에 블록 문(예: if 문)을 넣을 수는 없지만, 이 특수 기능을 사용하면 모든 JS 표현식의 결과를 출력할 수 있습니다.)