리액트로 개발하기 - Component 생성

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

위 코드는 이런 내용이다.

1. ReactDOM이 id가 root인 요소를 찾아서 가상의 요소를 만들고

2. 여기서 App이라는 컴포넌트를 만들어라.

 

StrictMode란?

공식문서에서는 이렇게 나와있다.

 

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.

Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

위의 예시에서, Header와 Footer 컴포넌트는 Strict 모드 검사가 이루어지지 않습니다. 하지만, ComponentOne과 ComponentTwo는 각각의 자손까지 검사가 이루어집니다.

StrictMode는 아래와 같은 부분에서 도움이 됩니다.
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견

- 레거시 문자열 ref 사용에 대한 경고

- 권장되지 않는 findDOMNode 사용에 대한 경고

- 예상치 못한 부작용 검사
- 레거시 context API 검사
- Ensuring reusable state

 

다시 돌아가서, 첫번째 코드에서 컴포넌트는 App 1개이고 시작되는 지점이라고 보면 된다.

컴포넌트의 파일명은 정해진 규칙은 없다. 하지만 확장자의 경우에는 js보다 jsx를 사용하는게 조금 더 직관적이다. vscode에서는 아이콘도 리액트 아이콘으로 바꿔준다.

 

Component 작성 시 지켜야 할 것

1. React 에서 Component 는 함수 형식이다.

2. 그리고 반환하는 것은 JSX 문법을 따른다.

3. 반환할 때는, 1개의 태그만 사용하고 만일 여러개의 태그가 들어가야 하는 상황이라면 부모 태그로 묶어준다. 빈 태그를 써도 되고, 보통은 div 태그로도 많이 묶어준다.

4. 컴포넌트는 자바스크립트 파일이기 때문에, javascript 사용 가능하고, 중괄호로 묶어서 표기하면 된다.

5. class 사용 시 className이라고 적어줘야 한다.

 

컴포넌트 특징

props와 state

props : 외부로부터 상태를 주입받는다

state : 해당 컴포넌트의 상태값

 

아래는 가장 기본적인 컴포넌트의 예시코드이다.

function App() {
  const name = "hyoshin";
  return (
    <>
      <p>{name}</p>
      <p>Hello, {name}</p>
      <p>{`Hello, ${name}`}</p>
    </>
  );
}

function App() {
  const names = ["hyoshin", "nicole"];
  return (
    <ul>
        {names.map((item) => {return <li>{item}</li>})}
    </ul>
  );
}

 

컴포넌트 안에 또 하나의 컴포넌트를 가지는 예시는 다음과 같다.

import AppComponent from './components/AppCompnent';

export default function App() {
  return (
    <>
      <AppComponent/>
    </>
  );
}

import React from "react";

export default function AppComponent() {
    return (
        <h1>I'm an App Component!</h1>
    );
}

 

props를 사용한 예시코드

import AppComponent from './components/AppComponent';

export default function App() {
  return (
    <>
      <AppComponent
        name="app"
        desc="component"
      />
    </>
  );
}

import React from "react";

export default function AppComponent(props) {
    return (
        <>
            <h1>I'm an App Component!</h1>
            <div>
                <p>{props.name}</p>
                <p>{props.desc}</p>
            </div>
        </>
    );
}

import React from "react";

export default function AppComponent({name, desc}) {
    return (
        <>
            <h1>I'm an App Component!</h1>
            <div>
                <p>{name}</p>
                <p>{desc}</p>
            </div>
        </>
    );
}

 

중요한 내용일 때만 보여주도록 로직 추가한 코드

import AppComponent from './components/AppComponent';

export default function App() {
  return (
    <>
      <AppComponent
        name="app"
        desc="component"
        isImportant={true}
      />
      <AppComponent
        name="app"
        desc="component"
        isImportant={false}
      />
    </>
  );
}

import React from "react";

export default function AppComponent({ name, desc, isImportant }) {
    return (
        <>
            <h1>I'm an App Component!</h1>
            {
                isImportant &&
                <div>
                    <p>{name}</p>
                    <p>{desc}</p>
                </div>
            }
        </>
    );
}