컴포넌트

리액트 컴포넌트 개념

• UI를 재사용이 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있다.
• 개념적으로 컴포넌트는 JavaScript 함수와 유사하다.(input과 output이 존재)
• “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. (props가 input, React 엘리먼트가 output)

리엑트 컴포넌트를 표현하는 두 가지 방법

1. 함수형 컴포넌트
2. 클래스형 컴포넌트

두 가지 모두 기능상으로는 동일하나, 공식적으로 함수형 컴포넌트를 사용하기를 권장한다.

컴포넌트 밖에서는 내가 필요한 파일을 import 하거나 export default 라는 기능을 통해서 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있다.

부모, 자식 컴포넌트

부모 컴포넌트 : 다른 컴포넌트를 품는 컴포넌트

자식 컴포넌트 : 다른 컴포넌트 안에서 품어지는 컴포넌트

JSX(JavaScript + XML)

• JavaScript를 확장한 문법

• 리액트에서는 딱 하나의 html 파일만 존재한다. (public > index.html)

• 그럼 리액트에서 어떻게 뷰를 그릴까?

• App.js 파일에서 보이듯, JSX문법을 사용해서 React 요소를 만들고 Dom에 렌더링 시켜서 그린다.

확장에서 react snippet을 검색해서 설치하면 편리한 묶음 생성이 가능하다.

rfc, rfce