React에는 class 컴포넌트와 함수형 컴포넌트가 존재합니다.

만약에 state 가 없고, life cycle 메소드가 필요없는 멍청한 컴포넌트라면, 함수형 컴포넌트로 선언을 하는것이 좋은 패턴입니다.

보기에도 깔끔하고, 컴포넌트의 로직을 컴포넌트 바깥으로 옮기므로, 나중에 테스팅하기에도 편리합니다.

함수형 컴포넌트는 this 에 접근하는것이 불가능하며, lifeCycle API 들을 사용하는것이 불가능합니다. 또한 오직 전달받는 props 에만 의존합니다.

Props 받는 방법

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

ES6 의 destructure(구조 분해 할당) 기능을 사용하면 다음과 같이 선언 할 수 있습니다.

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

많이 발생하는 실수

함수형 컴포넌트는 JSX value를 return해야지 렌더링이 됩니다.

class 컴포넌트는 render()함수에서 명시적으로 return하기 때문에 잘못된 값을 return할 일이 적지만 함수형 컴포넌트에서 생각보다 많이? JSX를 return 하지 않아 발생한 문법이 있었습니다.

정상

const Header = () => <div className="Header">POSTS</div>;

1번째 함수는 { }으로 감싸지 않아 return한다는 형태를 나타내고

const Header = () => {
  return <div className="Header">POSTS</div>;
};

2번째는 { }으로 감싸고 return 키워드를 통해 명시적으로 함수가 return된다고 말하고 있습니다.

2개의 코드 모두 JSX를 return 한다고 출력하고 있습니다.

오류

const Header = () => {
  <div className="Header">POSTS</div>;
};

보기에는 위의 코드와 달라보이지 않지만 { }으로 함수임을 선언했지만 return이 없기 때문에 JSX문법이 실행되는 코드입니다. webpack 트랜스 파일링 단계에서 err로 인식하지 않기 때문에 많은 실수를 유발하는 코드입니다. react 렌더링을 위해서는 return되야하는것을 잊지말아요!!

아래의 err message를 보면 렌더링에서 반환 된 항목이 없습니다.라고 출력하고 있습니다.