후니의 IT인프라 사전

React 동작방식 본문

카테고리 없음

React 동작방식

james_janghun 2024. 11. 12. 16:44

 

React가 동작하는 방식

프로젝트 코드 -> 해석 -> 해석한 결과물 -> React에서 html 템플릿에 기워넣기

<!--
  This HTML file is a template.
  If you open it directly in the browser, you will see an empty page.

  You can add webfonts, meta tags, or analytics to this file.
  The build step will place the bundled scripts into the <body> tag.

  To begin the development, run `npm start` or `yarn start`.
  To create a production bundle, use `npm run build` or `yarn build`.
-->

 

결국 HTML은 껍데기 템플릿만 만드는 것이다.

ReactDOM.render(<App />, document.getElementBtId('root'));

 

- ReactDOM : DOM에 그리자

- <App /> : App 컴포넌트를

- getElementById('root') : id가 루트인 엘리먼트에

 

React는 모든 엘리먼트를 바로 그리지 않고 필요한 만큼만 그린다.

 

컴포넌트

 

컴포넌트 함수

App 컴포넌트는 <div>를 가진 html을 반환한다.

App.js

function App() {
  return <div> Hello </div>;
  }

 

컴포넌트의 import

src의 자바스크립트에서 정의한다.

import App from './App'; 실제 App.js 파일의 경로를 설정해서 import를 한다.

import App from './App';

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

 

ReactDOM 함수

앞서 살펴본 함수로 App 컴포넌트를 render 렌더링해서 해당 엘리먼트 사이에 넣는다.

ReactDOM.render(<렌더링할 컴포넌트>, 렌더링할 엘리먼트 위치); 로 정의할 수 있겠다.

ReactDOM.render(<App />, document.getElementBtId('root'));

 

일반적으로 react는 하나의 컴포넌트만 렌더링 하기 때문에 루트 컴포넌트 밑에 끼워넣는 방식으로 처리해야한다.

(인접한 jsx 요소는 반드시 하나의 태그로 감싸야한다)

 

JSX

컴포넌트는 JSX로 구성한다. HTML과 JS를 조합하여 만들게 된다.

컴포넌트 네이밍 규칙은 대문자로 시작한다.

 

props

컴포넌트에서 컴포넌트로 전달하는 데이터를 말한다. props를 사용해서 컴포넌트를 효율적을 재사용한다.

리액트 컴포넌트로 넘어가는 매개변수이다.

 

    <Food fav="kimchi" />  props이름은 fav, 값은 kimchi를 넣고 Food 컴포넌트에 반영

 

참고로 props에 있는 데이터는 문자열인 경우를 제외하고는 모두 중괄호{}로 감싸야 한다.

 

props 인자 사용하기

이렇게 props의 값을 넘기게되면 해당 인자가 담겨있는 것을 확인할 수 있다.

 

이렇게 인자값을 활용해서 화면에 표출할 수 있다.

 

map함수의 사용

map은 배열에 있는 모든 요소에 특정 작업을 할 수 있다.

friends = ["철수","영희","금자","영호"]

friends.map(function(friend) {
  return friend + 님;
})

 

 

react Component의 구조

 

 

key는 넣어주자

 

해당 오류에서 확인할 수 있듯. 리액트 원소들은 유일해야하는데 리액트 원소가 리스트에 포함되면서 유일성이 없어진다.

그래서 key가 null로 표시되는데, key 값을 주입해서 유일한 원소로 변경해보자.

 

그리고 컴포넌트에 key props를 추가하자.

 

props 타입 검사하기

잘못된 타입의 props가 들어가면 미리 알수 있도록 검사하는 기능이다.

npm install prop-types

 

사용할때는 propTypes를 import하여서 사용한다.