[React] 컴포넌트 Components

 

Component Functions

1. 컴포넌트명은 대문자로 시작해야한다
2. 렌더가능한 값을 리턴해야한다

// 예시 1 - 리액트 컴폰넌트 예시
import React, { useState } from 'react';

function Counter() { // 컴포넌트 함수는 대문자로 시작
  const [count, setCount] = useState(0);

  return (
   // 화면에 렌더링 가능한 요소를 반환
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default Counter;

 

 

컴포넌트 렌더링부분 return 할때 하나의 요소만 리턴해야하는 이유

 

JSX 요소를 리턴할 때 여러 요소를 병렬로 써서 리턴하면 에러가 발생한다.

// 예시 2
// ...

return (
  // 에러
  <div>hello</div>
  <p>hi</p>
)

 

아래처럼 상위 태그로 감싸서 하나의 요소로 만들어서 리턴하면 에러가 발생하지 않는다.

// 예시 2-1
// ...

return (
    <div id="content">
      <div>hello</div>
      <p>hi</p>
    </div>
)

 

왜 상위 태그로 감싸서 하나의 요소로 리턴해야할까? 그 이유는 함수는 한번에 하나의 값만 리턴할 수 있기 때문이다. 위의 예시2 코드를 리액트가 제공하는 createElement API를 사용해서 작성하면 아래와 같다.

// 예시 3
// ...

return (
  // 에러
  React.createElement('div', null, 'hello');
  React.createElement('p', null, 'hi');
)

 

즉, 두개의 값을 리턴하고 있다. 함수는 하나의 값만 리턴할 수 있으므로 에러가 발생한다. 상위에 태그를 하나 더 씌우면 하나의 값만 리턴하게 된다.

// 예시 3-1
// ...

return (
	React.createElememt('div', {id: 'content'}, 
                	     React.createElement('div', null, 'hello'),
                	     React.createElement('p', null, 'hi'));
)

 

 

언제 컴포넌트 분리하는것이 좋을까?

한 컴포넌트에 여러개의 responsibilities가 있으면 state가 꼬일 수 있고, 의도한 대로 렌더링 되지 않을 수 있다. 한 컴포넌트에는 하나의 기능, 하나의 관심사만 갖는것이 좋다.