REACT - 구조

ryeon5789·2021년 9월 14일
1

TIL-REACT

목록 보기
1/11
post-thumbnail

React

웹이 점점 복잡해져서 UI를 만들기 위한 Javascript 라이브러리

리액트는 가상돔(virtual dom)을 통해 ui 를 빠르게 업데이트
이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소집합을 계산하는 기술
—> 불필요한 업데이트를 줄일 수 있음.
실제돔을 간략하게 만들어서 저장해있다가 변화가 생기면 해당부분만 변경

State change —> compute Diff —> re-render
상상해서 갈아보고 마지막에 필요한 부분만 갈아끼워 넣음
Compute diff 까지는 가상돔에서만 움직임

CRA create-react-app

  • 개발환경을 쉽게 하기 위한 툴체인
  • 하나의 명령어로 리액트 개발환경을 구축

Node.js

  • 자바스크립트는 브라우저 위에서 동작하는 언어였는데 브라우저 밖에서도 사용할 수 있게 하는 환경 -> 탈웹

NPM

  • node 패키지 매니저 (node 패키지들을 업데이트, 삭제, 추가하기 위해 관리해 주는 도구)

Node-modules

  • 프로젝트에서 사용하는 패키지들의 코드소스들이 모여있는 폴더

Packages.json

  • 패키지들에 대한 정보들이 저장되어 있는 파일.
  • dependencies 는 노드패키지들의 리스트를 나타내고 있다.

.git ignore

  • git으로 관리하지 않는 파일/폴더들이 나열되어 있는 파일
  • node-modules는 용량이 많아서 무거워서 올릴 필요 없다.
    프로젝트에 필요한 패키지들은 package.json에서 나열되기 때문.

index.html

  • 화면에 구현될 파일

index.js

  • App.js 파일을 index.htm에 구현되도록 지정하는 파일
  • ReactDOM.render(<첫번째인자>, 두번째인자)
    ReactDOM.render(<Routes />, document.getElementById("root"));
- <컴포넌트 />, (컴포넌트를 html에 위치할 곳).
- 해당 컴포넌트를 두번째인자에 지정한 곳으로 화면구현(렌더링)할 것이다.

App.js

  • 화면에 구현될 코드들이 있는 파일

JSX

  • 리액트에서 쓰는 자바스크립트 확정 문법
    - 마크업을 가져와서 기능을 붙이고 했으나 JS에서 마크업과 로직구현을 한번에 처리할 수 있게 나온 것이 JSX.

  • HTML 파일을 따로 안만들어도 됌.

  • HTML태그를 그대로 사용할 수 있음
    - 직관적으로 코딩을 할 수가 있음. 눈에 익숙하고 효율적으로 코드를 할 수 있음

  • DOM + Event를 한번에 처리할 수 있음

  • 하나의 부모 태그로 묶여져 있어야 바벨이 인식.
    —> js return ( <div> 여기에 코드를 </div> ) 안에 넣거나

	return ( <> 여기에 코드를 </> )

—> fragment 넣어야 함 —> 실제 돔에는 표시 안됌. 단순 묶기위한 거.

  • Self closing
    —> input,div, img… 등 모든 태그에 셀프클로징 할 수 있다.
    안에 내용이 없을 경우에…

  • 카멜케이스
    —> 클래스 부여할 때나 속성 부여할 때.
    카멜케이스로 온전히 표현 class => className,
    on click => onClick.

  • Javascript 동작가능 —> { }
    —> 중괄호는 자바스크립트로 인식. 중괄호가 없으면 태그 안의 문자열 그대로 나옴.

    	onClick = { this.alertMessage } ===> 클릭했을 때, 경고창 뜨게 하는 거.

Component

  • 재사용 가능한 UI 단위. 각각의 독립된 모듈
  • 함수형 / 클래스형 종류가 있음
    • 클래스형에는 state, lifecycle 을 사용할 수 있으나, 함수형은 안됌.
    • 그러나 hooks 를 통해 함수형도 가능하게 됌.
    • 클래스는 좀 더 직관적이라서 처음에 배움.
  • 가독성 좋아지고, 재사용가능해짐. 유지보수 좋음. 그리고 확장성 있게 해줌
  • 컴포넌트는 또다른 컴포넌트를 포함
    (부모 컴포넌트 -> 자식 컴포넌트)
  1. Class 형 컴포넌트

    • render 함수가 꼭 있어야 한다.
    • 훨씬 더 직관적이고 배우기 쉬움.
      ( lifecycle, state, props 같은 주요개념들 )
  2. 함수형 컴포넌트

    • 실무에서 많이 사용함.
    • 만들기 간편하고, 로직 / 기능 등 분리하기 편함

State

데이터는 변수나 state에 넣어 관리

변수 대신 쓰는 데이터 저장공간 하기 이용해서 만들어야 함

Import React, { useState } from ‘react’;

- import에 state 문법 쓰겠다고 해야 함.
Let [글제목2, 글제목변경] = useState( [ ‘남자코트추천’ , ‘강남우동맛집’])
<h3> { 글제목 } </h3>
<h4> { 글제목[1] } </h4>

장점
State가 변경되면 HTML이 자동으로 재랜더링
제목을 정렬하든가 제목을 수정하든가 등 새로고침없이 재랜더링
자주바뀌고, 중요한 데이터는 변수말고 state에 저장

변수와의 차이점은
변수는 변경되어도 재랜더링 안되고, 새로고침을 해야 함

코딩애플 추천!

profile
Whatever you want

0개의 댓글