[React] react v18 필수개념 컴포넌트+props 예제

＋React 컴포넌트 재사용및 props사용 ＋

 

리엑트를 처음 접하게 되면 html+jquery 조합과 다른점은 컴포넌트를 재활용할수있다.

보통html+jquery조합은 한페이지에 소스를 다작성하지만 react의경우는 모듈단위로 분리해서 개발한다.

아래샘플예제은 컴포넌트 재사용과 props개념을 잡는데 도움이 된다.

 

reactjs

 

☞ 버전정보

리엑트 18.0버전은  22/03/29일 릴리즈 되었다.

지금은 18.2로 설치가 된다.

 

 

☞ 프로젝트생성

프로젝트 생성을 위해 아래 명령어를 실행한다.

npx create-react-app example01
cd example01
npm start

 

 

☞ 프로젝트구조

불필요한 파일은 삭제하고 아래폴더 트리처럼 구축한다.

react 프로젝트구조

 

 

☞ index.js

18버전에서는 아래와 같은 형태로 변경되었다. 불필요한 소스는 제거하고 아래만 남겨둔다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

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

 

 

☞ App.js

index.js와 App.js를 작성후 실행한다.

여기서 방명록 부분이 계속 늘어날것이기 때문에 재사용해야한다.

//기존
function App() {
  return (
    <div>
      <h1>방명록</h1>
      <div className="card">
        <h2>제목</h2>
        <div className="actions">
          <button className="btn">수정</button>
        </div>
      </div>
    </div>
  );
}
export default App;

 

☞ 컴포넌트 재사용

1. components/List.js 파일을생성한다.

2. App.js파일에 <List/> 형식으로 불러온다.

3. 소스에서 html이나 스크립트 문법중 내장객체및 함수의경우 앞글자를 소문자로하고, 사용자가 직접 정의하는부분은 앞글자를

대문자로 하여 구분을 한다.

//List.js파일생성후
function List() {
  return (
    <div className="card">
      <h2>제목</h2>
      <div className="actions">
        <button className="btn">수정</button>
      </div>
    </div>
  );
}

//App.js는 아래와 같이 변경
import List from "./components/List";

function App() {
  return (
    <div>
      <h1>방명록</h1>
      <List/>
      <List/>
      <List/>
    </div>
  );
}

export default App;

 

 

☞ props

1. App.js에서 List태그에 text를 넣어서 보낸다.2. List.js파일에서 함수인자값으로 props로 받는다.3. {props.text} 형식으로 출력한다.

 //text 사용
<List text="안녕하세요" />
<List text="반갑습니다." />
<List text="Hello" />


//props로 받아서 {props.text}
function List(props) {
  return (
    <div className="card">
      <h2>{props.text}</h2>
      <div className="actions">
        <button className="btn">수정</button>
      </div>
    </div>
  );
}