[React] #4 컴포넌트

컴포넌트 사용 이유

재사용성 때문이다.

1. 컴포넌트 파일 만드는 방법

• 리액트 컴포넌트를 만들 때는 return이 있는 함수형으로 만들고
• 모듈의 기본 내보내기(default export)를 해주면 된다

방법1

• 함수 선언 방식으로 컴포넌트를 정의한다
• 함수의 이름이 파일 이름과 동일해야 한다
• export default 키워드를 사용하여 컴포넌트를 내보낸다

// Hello.js
import React from 'react'

// 함수명은 파일명(Hello)와 동일해야한다
function Hello (){
  return(
  <h2> hi </h2>
  );
}

// 모듈 내보내기를 통해 다른 파일에서 해당 컴포넌트를 사용하기 위함
export default Hello;

방법2

• 함수 선언 방식을 사용하되, export default를 함수 앞에 붙인다
• export default Hello;를 마지막에 별도로 추가할 필요가 없다.

// Hello.js
import React from 'react'

// function 앞에 한 번에 써두기
export default function Hello() {
  return(
  <h2> hi </h2>
  );
}

방법3

• 화살표 함수를 사용하여 컴포넌트를 정의한다
• const 키워드를 사용하여 변수를 선언한다
• 화살표 함수의 경우, 함수 이름을 따로 지정하지 않고 변수에 할당한다

// Hello.js
import React from 'react';

// 화살표 함수로도 가능하다
const Hello = () => {
  return (
    <h2>hi</h2>
  );
}

// function 앞에 export deault를 붙여도 상관없음
export default Hello;

2. return시 하나의 컴포넌트로 감싸기

// Hello.js
import React from 'react';

const Hello = () => {
  return (
    // 하나의 태그로 감싸줘야한다
    <>
    <h2>hi</h2>
    <h5>My name is JeongIn!</h5>
    </>
  );
}

export default Hello;

만약 <h2>와 <h5> 두 개의 태그가 같은 depth에서 return 되면 오류가 난다.
return은 반드시 한 개의 태그가 감싼 상태로 return 시켜야한다.

빈 태그 <> </>로 해도 되고, <div> </div>로 해줘도 상관없다.

3. 컴포넌트 안에 컴포넌트

이런식으로 트리 구조를 갖게 된다.

4. 파일 확장자에 대해

결론 : .js나 .jsx나 상관은 없다. 팀/개인 선호도 차이