( React ) 컴포넌트 ( 1 )

React Components의 특징

• 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누기 가능

• 개념적으로 컴포넌트는 JavaScript 함수와 유사

• props 라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환함.

리액트 컴포넌트를 표현하는 방법

• 함수형 컴포넌트와 클래스형 컴포넌트가 있음

• 두 가지 모두 기능상으로는 동일하지만, 공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장하기에 함수형만 사용함

• 함수형 컴포넌트는 기본 함수와 마찬가지고 input과 output 나뉨

함수형 컴포넌트

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

리액트 세계에서 말하는 컴포넌트는 즉 함수이다

컴포넌트 보는 방법

프로젝트 생성 시 주의사항!

• 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 작성하기.

• 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓기 ex) TodoContext.jsx