[react] 기본 정리

react

📌 환경 구축

01. node.js 준비

02. react app을 실행시킬 폴더를 잡고 터미널에 npx create-react-app 넣기

03. 위 이미지가 뜨면 끝 !

04. 실행은 npm start

실행 안 되는 경우 port 3000번대에 뭘 쓰는지 확인해보기!

---

📌 소스코드 수정 방법

지금 적고 있는건 강의 기준으로 작성되기 때문에 기본으로 생성되는 파일 기준으로 설명합니다.

01. 기본 생성 파일

02. index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; // index.js의 css 파일 
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
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();

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

📍 <div class="root"><App/></div>으로 렌더링 된다는 의미

03. app.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

📍 변경하거나, 수정되는 파일 이 파일을 이용하면 된다. ( 자세한 수정은 아래 components 있다.)
📍 css는 index.js > index.css , app.js > app.css

---

📌 components 만들기

app.js 파일에 header를 추가 하고 싶은 경우

function Header() {
  //대 문 자 로 기수해야함
  return (
    <header>
      <h1>
        <a href="#none"></a>
      </h1>
    </header>
  );
}

📍 react의 components는 무족권,,, 무조건 대문자로 시작해야합니다.

// app
function App() {
  return (
    <div className="App">
      <Header></Header>
    </div>
  );
}

📍 하단 app.js에 components 이름을 태그로 넣어주면 됩니다.

---

📌 props

데이터를 넣거나 변경하고 싶은 경우

function Nav(props) {
  const array = []; // 담아줄 배열 만들기
  for (let i = 0; i < props.list.length; i++) {
    let li = props.list[i];
    array.push(
      <li key={li.id}>
        <a href={"/read/" + li.id}>{li.title}</a>
        <p>{li.body}</p>
      </li>
    );
  }
// app
function App() {
  const list = [
    { id: 1, title: "one", body: "header" },
    { id: 2, title: "two", body: "nav" },
    { id: 3, title: "three", body: "body" },
  ];
  return (
    <div className="App">
      <Nav list={list}></Nav>
      {/*{} ""로 감싸서 보내면 문자열로 보내지고 {}로 넣어주면 데이터 바인딩*/}
    </div>
  );
}

📍 function components(props){} props 값을 파라미터로 담아줌
📍 많은 방법이 있겠지만 여기서는 for문 array 만들어서 담아줌
📍 배열을 담아서 넣어줄 때 고유한 key이 있어야 함