React
React란
Facebook(meta)에서 만든 라이브러리, React.js로 javaScript의 라이브러리라고 생각하면 된다.
라이브러리
자주 사용되는 기능을 정리해서 모아논 것
React를 이해하기 위해서
1. SPA vs MPA
SPA,MPA 개념을 알아야 한다.
SPA (Single Page Application)
React가 사용하는 방식이다
해석 그대로 하나의 페이지이다. 위 사진처럼 하나의 HTML틀 안에서 특정 페이지를 요청할 때 요청 받은 페이지의 내용을 보여주는 방식이다.
MPA (Multi Page Application)
우리가 자주 접해본 HTML로 코딩할때 쓰이는 방식이다.
해석 그대로 여러개의 페이지이다. 각각의 페이지 마다 HTML로 만들어야 한다.
간단하게 생각해보자면 여러개의 페이지를 필요로하는 MPA보다 하나의 HTML틀에 원하는 뷰를 호출하는 SPA가 효율적이다.
2. Virtual Dom
그대로 해석해보면 가상의 돔이다. React가 사용하는 방식이다
Dom (document object model)
웹 페이지를 정의하는 하나의 객체 즉, 하나의 웹 사이트에 대한 정보를 모두 담고 있는 상자라고 생각하면 편하다.
쉽게 설명하자면 화면이 업데이트 되면 Dom을 직접 수정해야 하는데 가상의 공간을 만들어 Dom을 직접 수정하지 않고 업데이트 해야할 부분만 빠르게 업데이트 한다고 생각하면 된다.
3. Component
React를 하다보면 Component라는 말을 많이 들을 것이다.
컴포넌트는 구성 요소라는 뜻으로 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성이 된다.
(React에서 모든 페이지가 컴포넌트로 구성)
쉽게 생각하기 위해 자동차로 예시를 들겠다.
자동차는 엔진, 바퀴 등등 이런 구조물로 조합이 된다. 이때 엔진 컴포넌트 바퀴 컴포넌트 들이 모여서 자동차 컴포넌트가 구성이 된다고 생각하면 된다.
React 장점 및 단점
장점
빠른 업데이트, 렌더링 속도
-> spa,virtual dom,component....
단점
공부할게 많음
React 파일 구조
node_modules
현재 프로젝트에 포함된 라이브러리들이 설치되어 있는 폴더로 보통 깃과 같은 저장소에 올릴 때는 이 폴더를 함께 올리지 않는다.
public
index.html과 같은 정적 파일이 포함되는 곳으로 컴파일이 필요 없는 파일들이 위치하는 폴더이다.
src
리액트 내부에서 작성하는 거의 모든 파일들이 이 폴더 내부에서 작성되며 이 폴더에 있는 파일들은 명령어에 따라 JS로 컴파일이 진행된다.
index.js
React 컴포넌트를 렌더링하는 시작점이며, 애플리케이션이 브라우저에서 실행시킴
즉, React 애플리케이션을 브라우저의 DOM에 연결시킴
App.js
최상위 컴포넌트
이 파일에서 주로 애플리케이션의 전체 구조를 정의하며, 나머지 모든 컴포넌트들을 포함
.gitignore
깃에 포함하고 싶지 않은 파일의 이름 혹은 폴더등을 입력하는 파일이다.
package.json
프로젝트에 관련된 기본적인 내용(프로젝트의 이름, 버전 등)과 라이브러리들의 목록이 포함되어 있다.
라이브러리가 설치된 node_modules 대신에 이 package.json을 깃에 포함하여 올리게 되며 후에 누군가가 프로젝트를 클론할 때 이 package.json에 적혀있는 라이브러리의 목록을 기준으로 npm에서 설치하게 된다.
README.md
보통 깃과 같은 저장소에 올릴 때 프로젝트에 대한 설명을 작성하는곳으로 해당 저장소에 진입하면 가장 먼저 띄워진다.
3주차 미리보기
Element
element는 component와 비슷하면서도 다르다
Element는 한 번 만들어지면 바뀌지 않는 고정된 UI 조각.
Component는 필요할 때마다 변경되거나 재사용할 수 있는 UI를 만드는 도구.
즉 Component안에 Element가 있다고 생각하면 편하다.
Props
Props는 React에서 Component 간에 데이터를 전달할 때 사용하는 속성이다.
예를 들자면, 사람을 컴포넌트라고 생각하면 "나"라는 사람은 부모의 DNA을 받고 태어난다. 그래서 사람마다 특징이 다른데 이때 부모한테 받은 DNA를 Props라고 생각할 수 있다.
즉 사람 형태는 비슷하지만(component) 성격(props)이 다르다고 이해하면 편할 것이다
State
React Component의 변경 가능한 데이터(속성)
Props와 비슷하게 그 컴포넌트의 속성을 나타내지만 props와 차이점은 Props는 부모 컴포넌트로 부터 전달되는 속성이여서 속성을 부모 컴포넌트에서 변경하지 않는 한 변경이 불가능 하고 state는 컴포넌트 내부에서 관리하여 동적인 값으로 속성을 변경할 수 있다
예를 들자면 Props는 앞에서 부모로 부터 받는 DNA라고 했다. 그래서 나의 눈동자 색이라든지, 털이 많이 자란다 든지 다음과 같은 부모로 받은 특징은 바꿀 수 없다고 생각하면 된다
State는 부모에게 머리카락 색을 전달 받았지만 내 기분에 따라 머리를 자르거나 머리 스타일을 바꿀 수 있다고 간단하게 생각하면 편할 거 같다.
