Chapter 03 컴포넌트

 

컴포넌트란?

스스로 상태를 관리하는 캡슐화된 코드 조각

 

컴포넌트의 기술적인 설명 : 컴포넌트는 하나의 JSX를 반환하는 함수이다.

 

그리고 아래 <App/> 처럼 컴포넌트는 jsx에서 하나의 태그처럼 쓸 수 있다.

 

function App(){

  return(

    <div>

      <h1>Hello,</h1>

      <h2>World</h2>

    </div>

  );

}

ReactDOM.render(

  <App />,

  document.getElementById('root')

);

 

 

컴포넌트 만들기

JSX 와의 차이는?

- 컴포넌트는 기본적으로 함수이기 때문에 자신만의 고유한 로직이 들어갈 수 있다.

- 스스로 상태를 가질 수 있다. (상태가 변하면 알아서 반영된다.)

 

import, export

- es6에서 모듈을 불러오고 내보내는 방법

 

컴포넌트 생성 시, 주의사항

컴포넌트 이름은 PascalCase로

- MyComponent

- ArticlePage

- UserProfile

 

컴포넌트는 의미단위로 쪼개서 파일을 분리한다.

 

최상위 컴포넌트 이름은 일반적으로 App이다.

- index.js - entry point. 최종 컴포넌트를 DOM에 render (ReactDOM.render)

               - 모든 React 코드의 엔트리 포인트

- App.js - 모든 컴포넌트들의 root 컴포넌트

 

Props (properties의 줄임말)

상위 컴포넌트에서 하위 컴포넌트로 어떤 값을 전달해줘야 할 때 props를 사용한다.

부모 컴포넌트에서 자식 컴포넌트로 내려주는 데이터를 의미한다

 

function App(){
 return(
  <div>
   <MyComponent value={'test'}/>
  </div>
 )
}

function MyComponent(props){
 return <div>{props.value}</div>
}

 

 

아래처럼 컴포넌트 태그로 감싼 값을 props.children으로 전달시킬수도 있다.

아래 예시에서 props.children으로 전달된 값은 h1 태그로 이루어진 jsx 값 그대로 내려준다.

function App(){
 return (
  <div>
   <MyComponent>
    <h1>value</h1>
   </MyComponent>
  </div>
 );
}

function MyComponent(props){
 return <div>{props.children}</div>
}

 

 

props 활용 팁

- 구조분해할당 구문을 잘 활용하자

- 특정 Props에 기본 값을 줄 수 있다. (defaultProps)

- Props는 읽기 전용이다.

 

 

 

STATE란?

컴포넌트 내부에서 사용되는 변수

- State 값이 변하면 컴포넌트가 리렌더링 됨

- 렌더링 사이클에서 값이 보존됨

function App(){
 const [value, setValue] = useState(0);
 
 return (
  <div>{value}</div>
 );
}

 

아래 그림에서 setValue()를 통해서 값이 증가가 되면, 값이 증가 됐다 라는 신호를 App 컴포넌트한테 전달을 해주게 된다.

그러면 App 컴포넌트는 자신의 상태가 변화했다라고 판단을 하고, 이 함수 자체를 한 번 더 실행함으로써 새로운 jsx를 화면에 그려주게 되는 것이다.

 

 

 

함수형, 클래스형 컴포넌트

초기에는 컴포넌트를 클래스 형태로 주로 만들었음.

 

클래스형 컴포넌트

클래스형 컴포넌트 = 클래스 문법으로 구현한 컴포넌트

- useState와 같은 Hooks는 React 버전 16.8 부터 등장

- 즉, 그 전에는 함수형 컴포넌트에서 state를 사용할 수 없었고, 클래스형 컴포넌트만 state를 가질 수 있었다.

- render라는 멤버 함수에서 반환한 값(JSX)이 화면에 그려진다.

 

 

 

클래스형 컴포넌트 사용하기 위한 조건

1. 자바스크립트의 클래스 문법을 이용해서 컴포넌트를 구현한다.

1-1. 클래스가 컴포넌트가 되기 위해서는 'react' 라이브러리에 있는 Component라는 클래스를 상속 받아야 한다.

       이 컴포넌트 클래스 안에는 리액트의 컴포넌트이기 위해 필요한 기본적인 값이나 함수들이 들어있다.

2. 클래스형 컴포넌트에서는 멤버변수로 state를 정의한다.

2-1. state라는 이름의 멤버 변수 안에 있는 내용물들이 컴포넌트의 state가 된다.

함수형 컴포넌트의 state는 배열 형태로 state를 가져오고, 여러 state를 독립적으로 만들어서 사용할 수 있었다.

그런데 클래스형 컴포넌트에서는 이 State를 따로 구분하지 않고 State라는 이름으로 하나의 오브젝트로 묶어서 관리한다.

3. 클래스가 만들어질 때 실행되는 생성자인 constructor 여기에서 따로 state를 초기화를 해줄 수도 있다.

(state 정의하는 부분에서 바로 초기화를 할 수도 있는데, constructor는 컴포넌트가 만들어지면 바로 실행이 된다. 그때 한 번 더 초기화를 해줄 수 있고, 내가 원하는 위치에서 초기화를 해주면 된다.)

4. 클래스형 컴포넌트에세 state 세팅은, this.setState() 멤버 함수를 이용하여 state 전체 값을 세팅을 하는 방식으로 동작을 한다.

setState 함수는 'Component' 클래스에 정의가 되어 있다. 그리고 App 컴포넌트는 Component 클래스를 상속 받고 있기 때문에 바로 setState를 사용할 수 있게 되었다.

 

 

 

 

3-5. 스터디파이 강의 컴포넌트 만들기

 

import "./CourseCard.css";

function CourseCard({ img, tags, title, startPrice, types }) {
  return (
    <div className="CourseCard">
      <div claclassNames="cover">
        <img alt="" src={img}></img>
      </div>
      <div className="info">
        <ul className="tags">
          {tags.map((item, i) => (
            <li key={i} className="tag">
              {item}
            </li>
          ))}
        </ul>
        <h4 className="name">{title}</h4>
        <div className="prices">
          <span className="sale-percent">60%↓</span>
          <span className="monthly-price">
            월 {startPrice.toLocaleString()}원
          </span>
          <span className="installment-month">/ 12개월</span>
        </div>
        <ul className="types">
          {types.map((type, i) => (
            <li key={i} className="type">
              {type}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default CourseCard;

 

 

 

3-5. Accordion 컴포넌트 만들기

 

App.js

import Accordion from "./components/Accordion";

function App() {

  return (

    <div style={{ fontSize: "2rem", padding: 30 }}>

      <Accordion title="This is a Title" content="This is a content" />

    </div>

  );

}

export default App;

 

 

Accordion.js

import { useState } from "react";

function Accordion({ title, content }) {

  const [isOpened, setIsOpened] = useState(false);

  return (

    <div>

      <div

        style={{

          background: "#666",

          color: "white",

          fontWeight: "bold",

          padding: 10,

          display: "flex",

          justifyContent: "space-between",

        }}

        onClick={() => {

          setIsOpened((a) => {

            return !a;

          });

        }}

      >

        <div>{title}</div>

        <div>{isOpened ? "-" : "+"}</div>

      </div>

      {isOpened && (

        <div

          style={{

            border: "1px solid #999",

            padding: 20,

          }}

        >

          {content}

        </div>

      )}

    </div>

  );

}

export default Accordion;