[React] React 프로젝트/컴포넌트 구조

 

 

1. node_modules

npm에서는 외부 모듈들을 다운받고 관리해준다. 

다운 받은 외부 모듈들이 node_modules에 들어간다.

 

 

 

2. package.json

프로젝트의 설정들이 들어간다.

외부 모듈을 다운받으면 dependencies에 모듈명과 버전들이 기입된다.

 

외부 모듈 다운 시 package.json에 모듈 정보가 기입되고 node_modules에 특정 모듈이 설치된다.

 

scipts에 start부분을 보면 react-scripts start가 있는데, 이는 우리가 리액트를 동작시키기 위해 npm start를 치면 해당 코드가 동작하는 것이다.

 

 

3. public > index.html

public은 주로 이미지 파일을 추가할 때 사용한다.

src폴더에서 코딩을 하게 될 것이다. css, js 등으로 코딩을 하게 되면 바벨, 웹팩 등의 도구로 활용해서 public > index.html에 새로운 태그들을 넣게 된다.

 

 

2023.04.19 추가

아래서부터는 컴포넌트 구조이다.

리액트에서 컴포넌트 구조라고 할 수 있는 것은 1) 함수형태로 되어 있어야하며, 2) 반드시 UI요소를 반환해야 한다.

 

 

4. src > index.js

index.js는 리액트가 처음 시작될 때 가장 먼저 시작한다.

import를 이용해 라이브러리, 모듈을 다운받을 수 있고, index.css와 같이 직접 작성한 문서도 가져올 수 있다.

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

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

// 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();

root.render 부분을 보면 root라는 아이디를 받아오는 것을 볼 수 있는데, 이 때 root는 public>index.html에 있는 id=root이다.

 

 

저 div 안에다가 root.render의 값을 넣는 것이다.

 

 

5. src > App.js

App.js에는 export default App이 명시되어 있어 딴 데서도 import 할 수 있게 해둔 것이다. App.js에는 App이라는 함수가 있다.

 

 

App이 index.js로 불려와지고, 불려와진 결과물들이 root 즉, index.html에 들어가게 된다.

 

 

import logo from './logo.svg';
import './App.css';
import ChildComponent from './child.js';

function App() {
 
  return (
      <h1 className="t">안녕하세요!</h1>     
  );
}

export default App;

return의 결과물들을 화면에 보여주게 되는 것이다. 또한 html에서 class가 쓰였는데, 리액트에서는 class가 className으로 쓰인다.

또한 컴포넌트는 태그형식으로 작성할 수 있다.

 

function ChildComponent(props){
  const {name, age} = props;
  return <div>
        <p>이름은 {name} 이며, {age}살 입니다.</p>
    </div>
}

export default ChildComponent;

만약 이런 컴포넌트를 만들었다면, 

<ChildComponent name="산하" age={26} />

이런식으로 태그로 쓸 수 있다.

 

 

추가로 이렇게 자식 컴포넌트를 부르는 컴포넌트를 부모 컴포넌트라고 한다.

리액트에는 부모와 자식 관계가 있다.

import logo from './logo.svg';
import './App.css';
import ChildComponent from './child.js';

function App() {
  
  return (
    <div>
      <h1>안녕하세요!</h1>
      <ChildComponent name="산하" age={26} />
    </div>
  );
}

export default App;

 

 

출처 : https://www.inflearn.com/course/%EC%98%AC%EC%9D%B8%EC%9B%90-%EA%B0%9C%EB%B0%9C%ED%81%B4%EB%9E%98%EC%8A%A4

비전공자를 위한 진짜 입문 올인원 개발 부트캠프 - 인프런 | 강의