React
-
node 환경에서는 npm에서 외부에 있는 코드들(모듈들)을 다운받을 수 있다.
-
package.json에는 프로젝트와 관련된 설정들이 들어간다.
-
npm install을 통해서 다른 라이브러리들을 설치할 수 있고 package.json에 추가가 되고 node_modules에 해당 모듈이 추가 된다.
-
npm start라는 명령어는 package.json에 자바스크립트 명령어를 실행시키는 것이다.
-
스크립트 명령어를 추가하여 사용하게 된다.
-
public 폴더에서 index.html 파일의 코드들을 리액트 프로젝트에서 보게된다. public폴더는 주로 이미지를 추가할 때 사용하게 된다.
-
src 폴더에서 코딩을 하게되고 주로 js나 css를 이용해서 코딩하게 된다.
-
이러한 작업들을 통해서 public 폴더에 index.html의 <body>태그의 <div id="root"><div>에 코드들을 채우게 된다.
-
리액트의 핵심개념은 컴포넌트이다. 리액트는 여러개의 컴포넌트들의 집합으로 개발된다. 그리하여 유지보수가 용이하다.
-
컴포넌트는 함수로 구성되어 있으며 UI요소를 return 한다.
-
리액트의 두번째 핵심은 DOM이다.
[DOM 이란?]
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C
리액트의 구조
-
App.js의 리턴값들이 index.js로 불려와지고 그 값들이 index.html에 root에 보여지게 된다.
export default App;
document.getElementByiD('root')
-
props 부모컴포넌트가 자식컴포넌트에게 주는 값, 전달 받은 값은 변경없이 그대로 사용(정적)
-
state 데이터를 받아와 컴포넌트에 새로운 값을 보여주는 변화하는 값(동적)
-
useEffect 렌더링 제어, useEffect(function, [대상값])을 넣어주어 사용한다. 대상에 들어가는 변수가 변경될 때 function이 재실행된다.
'개인공부 > React' 카테고리의 다른 글
| [React]Styled-components (0) | 2023.09.26 |
|---|---|
| [React] TypeError: Cannot read property 'prototype' of undefined 에러 (0) | 2021.07.01 |
| React Training web (0) | 2021.06.24 |