[소플의 처음 만난 리액트] 3장 실습문제

Btn.jsx

import React from "react";

function Btn(props){
  return(
    <button className={`btn btn-${props.color}`}>
      <b>
        {props.children}
      </b>
    </button>
  )
}
export default Btn;

ConfirmDialog.jsx

import React from "react";
import Btn from "./Btn";

function ConfirmDialog(props){
  return(
    <div>
      <p>내용을 확인하셨으면 확인 버튼을 눌러주세요.</p>
      <Btn color = 'warning'>확인</Btn>
    </div>
  )
}

export default ConfirmDialog;

핵심 키워드

• React는 module 이라는 기능을 지원하며, 하나의 파일을 import와 export를 이용해 여러 개의 파일로 나눠 코드를 작성할 수 있다.

Book.jsx

import React from "react";
// 실습: jsx 코드 작성해보기

function Book(props){
  return(
    <div>
      <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
      <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
    </div>
  )
}

export default Book;

Library.jsx

import React from "react";
import Book from "./Book";

function Library(props){
  return(
    <div>
      <Book name="처음 만난 파이썬" numOfPage={300} />
      <Book name="처음 만난 AWS" numOfPage={400} />
      <Book name="처음 만난 리액트" numOfPage={500} />
    </div>
  )
}

export default Library;

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';

import ConfirmBtn from './chapter_03/ConfirmBtn';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
   <React.StrictMode>  
    <ConfirmBtn />
   </React.StrictMode>
);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

핵심 키워드

• React에서 props의 자료형을 선언할 경우 문자열은 “”로, 그 외의 자료형은 {}로 선언한다.

• 기존의 JavaScript에서 문자열을 사용하기 위해서는 + 연산자를 통해 문자열들을 이어줘야 했지만 React에서는 ``을 이용해서 간단하게 문자열을 입력할 수 있다. ``의 내부에 ${}을 사용하면 JavaScript의 문법을 이용해 동적인 값을 입력할 수 있다.

• React.StrictMode 태그는 컴포넌트를 마운트 시켰다가 언마운트 시키는 과정을 거친다. 이를 통해 자식 컴포넌드를 검사하고 잘못된 부분을 알아낼 수 있다. StrictMode 가 검사하는 항목은 다음과 같다.
• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않은 findDOMNode 사용에 대한 경고
• 예상치 못한 side effect 검사
• 레거시 context API 검사
• 재사용 가능한 상태를 보장

결론!