Study Web Development

4월 5일

이전으로

React

컴포넌트

함수형 컴포넌트

1. 새 리액트 앱 ch05-component 생성하고 구동
2. VSC에서 폴더 열기-ch05-component 선택하고 src 폴더에 새 파일 MyComponent.js 생성

import React from "react";

// props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있음
/*
const MyComponent = (props) => {
    return <div>안녕하세요, {props.name}를 배우고 있습니다.</div>
}
*/

// 태그 사이의 내용을 보여주는 children
// JSX에서는 단독 태그라도 /로 닫아야 함
const MyComponent = (props) => {
    return (
        <div>
            안녕하세요, 제 이름은 {props.name}입니다.
            <br/>
            children 값은 {props.children}입니다.
        </div>
    );
}

// props 값을 따로 지정하지 않았을 때 보여줄 기본값을 설정하는 defaultProps
MyComponent.defaultProps = {
    name:'Spring Boot'
}

export default MyComponent;

3. App.js를 다음처럼 수정

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

/*
function App() {
  return <MyComponent name="react" />;
}
*/

// props 값을 따로 지정하지 않았을 때 보여줄 기본값을 설정하는 defaultProps
/*
function App() {
  return <MyComponent />;
}
*/

// 태그 사이의 내용을 보여주는 children
const App = () => {
  return <MyComponent>리액트</MyComponent>;
}

export default App;

4. 새 리액트 앱 ch06-component 생성하고 구동
5. VSC에서 폴더 열기-ch06-component 선택하고 src 폴더에 새 파일 MyComponent.js 생성

import React from 'react';
import PropTypes from 'prop-types';

// 구조 분해 할당 문법(=객체에서 값을 추출하는 문법)을 통해 props 내부 값 추출하기
/*
const MyComponent = (props) => {
    // 구조 분해 할당
    const {name, children} = props;

    // const name = props.name;
    // const children = props.children;

    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다.
            <br/>
            children 값은 {children}입니다.
        </div>
    );
}
*/

// 함수 파라미터가 객체라면 그 값을 바로 구조 분해 할당할 수 있음
const MyComponent = ({name, children}) => {
    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다.
            <br/>
            children 값은 {children}입니다.
        </div>
    );
}

// PropTypes를 통한 props 검증
// name값은 문자열(string)로 전달
// 숫자로 전달시 화면상 오류는 없지만 콘솔에 경고 출력
MyComponent.propTypes = {
    name: PropTypes.string
}

export default MyComponent;

6. App.js를 다음처럼 수정

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

/*
function App() {
  return <MyComponent name="Web Service">리액트</MyComponent>;
}
*/

// 숫자를 전달하면 콘솔에 경고 출력하여 propTypes가 잘못되었음을 알림
const App = () => {
  return <MyComponent name={1234}>React</MyComponent>;
}

export default App;

7. index.js를 다음처럼 수정(React 18의 변경 사항 반영)

import React from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

root.render(
  <React.StrictMode>
    <App />
  </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();

다음으로