FRONT-END/React4

• 

  [React] - 컴포넌트 (함수형 / 클래스형) 컴포넌트? 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. 선언체란 컴포넌트를 생성하고 보이고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이것을 React가 화면에서 그려주는데, 이를 통해 React 컴포넌트가 선언체라는 것을 알 수 있다. props라고props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 컴포넌트 파일은 `App.jsx` 처럼 `.js `확장자가 아닌 `.jsx` 확장자를 쓰는 것이 직관적으로 좋다. 하지만 별다른 차이점은 없다. (협업 시 편함) 1. 리액트.. FRONT-END/React 2023. 2. 12.

• 

  [React] - 환경 세팅 npm? NPM(Node Package Manager) - 서드 파디 패키지들이 모여있는 집합소. yarn - 프론트엔드 의존성을 관리하기 위한 패키지 매니저 1. yarn 설치 터미널에서 yarn 설치 npm install -g yarn npm install -g yarn npm의 역할과 동일하지만 npm보다 성능적으로 개선된 패키지 매니저 yarn에서 패키지 설치 yarn add [패키지 이름] 2. npm과 yarn의 특징 공통적인 특징 자바스크립트 런타임 환경인 노드의 패키지 런타임 이란? 프로그래밍 언어(자바스크립트)가 구동되는 환경을 뜻함. 구동되는 환경 ↓ 브라우저 (크롬, 엣지, 웨일, 파이어폭스) node 환경 차별적인 특징 npm node.js 설치시 자동으로 생성 node packag.. FRONT-END/React 2023. 2. 12.

• 

  [React] - 자주 사용되는 ES6 문법 01. object key - value pair const age = 21; const someObject = { name: '서근', age: age, //key와 value가 같은 모양이면 value 생략 가능 blog: 'https://seons-dev.tistory.com, someFunc: () => { } }; 1) 얕은 복사 const obj1 = { somekey1: 10, somekey2: '안녕', }; const obj2 = obj1; obj1.somekey1 += 1; console.log('obj1', obj1); //{somekey1: 11, somekey2: '안녕'} console.log('obj2', obj2); //{somekey1: 11, somekey2: '안녕'} .. FRONT-END/React 2023. 2. 12.

• 

  [React] - SPA / MPA ? SPA? Single Page Application - 한 개의 페이지로 이뤄진 앱 MPA(Multi Page Application) 과 상반된 개념 왜 SPA가 좋은가? MPA는 어떠한 이벤트가 발생할때마다 웹페이지가 Reload 되어 Re-rendering되 데이터를 많이 잡아 먹는 문제가 있다. 왜냐하면 SSR을 사용하기 때문! 하지만, SPA를 사용하면 필요한 부분만 수정해 웹페이지가 Reload 되는 문제가 없다. SPA에는 대부분 CSR을 권장하고 사용하고 있다. CSR / SSR SSR - Server Side Rendering 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달됨 CSR - Client Side Rendering 렌더링이 클라이언트 쪽에서 일어남 SPA 장점 딱 한개의.. FRONT-END/React 2023. 2. 12.