4. components

요즘 프론트 엔드 개발 프레임워크의 주요 개념은 '컴포넌트(components)'입니다.

이는 레고와 같습니다.

각 필요한 부품을 만든 후, 그 부품을 결합하여 페이지를 생성하는 것입니다.

이는 생산성의 증가로 이어지지만, 많은 수의 컴포넌트를 관리하므로 코드의 가독성의 감소로 이어질 수 있습니다.

때문에 컴포넌트를 생성할 때 조심히 생성하시는 것이 좋습니다.

 

리엑트에서는 컴포넌트를 js의 함수 생성방법으로 생성할 수 있습니다.(class도 있지만 함수가 더 쉽습니다.)

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

이는  jsx의 도움으로 가능한 일입니다.

 

아래 예시 코드를 살펴봅시다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

Welcome 컴포넌트를 생성하고 props라는 매개변수를 받았습니다.

여기서 props는 welcome태그 안의 name에서 값을 주고 있습니다.

 

만약 컴포넌트의 리턴값의 크기가 커지면 꼭 <div></div> 태그나 <></>태그로 감싸주세요(<></>는 리엨트에서는 에러가 아닙니다.)

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

 

문서의 맨 아래에 나오는 경고문을 잘 읽어보세요

props는 오직 읽기 전용으로 props의 값이 변하게 함수를  작성하면 안 된다는 경고문이 있습니다.

그 아래줄에 이를 해결하기 위해 state를 사용하라고 나와있습니다.