Dev

2. state 컴포넌트 안에서 사용되는 이벤트에 의해 변경이 일어나는 동적인 값. 값을 변경할 수 있으며 반드시 setState를 사용하여 변경한다. ※ state 사용할 때 주의사항 ❗state에 저장되는 객체는 반드시 초기화(생성자에서 초기화) ❗state 값을 임의로 직접 변경하지 말 것, 반드시 state 값 변경시 setState() 사용. 직접 변경하면 render 함수가 호출되지 않아 리렌더링 발생 X 1) 사용법 (1) 기본 사용: useState ① import useState import { useState } from 'react'; ② declare useState() useState 기본형태 const [state, setState] = useState(initialState);..

1. 프로퍼티(properties, props) 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용(단방향 데이터 흐름). 프로퍼티 값은 수정 불가능, 즉 읽기 전용 데이터. 1) 사용법 상위 컴포넌트에서 Props를 지정하고 하위 컴포넌트에서 받은 Props 값을 렌더링. 문자열 전달: 큰 따옴표(" ") 사용 숫자형, boolean 등의 값(문자열 외의 값) 전달: 중괄호( { } ) 사용 (1) 단일값 전달 App.js import React from 'react'; import Hello from "../src/Hello"; function App() { return ( //사용할 컴포넌트 props의 name 값을 "React"로 ); } export default App; Header.js..

1. 컴포넌트(Component) 재사용이 가능한 각각의 작고 독립적인 모듈. 리액트로 개발한 앱을 이루는 가장 작은 단위, 조각. 레고블럭으로 비유할 때, 레고블럭으로 만든 집은 리액트 앱으로 보고 집을 구성하는 하나의 작은 블록들은 컴포넌트라고 할 수 있음. 1) 왜 컴포넌트인가 기존 웹 프레임워크는 MVC(Model, View, Controller) 방식으로 분리하여 관리. 따라서 각 요소들이 독립적이지 않고 의존성이 높아서 재사용이 어려움. → 컴포넌트는 View를 독립적으로 구성하여 재사용 가능! 2) 컴포넌트 사용 컴포넌트의 이름은 항상 대문자로 시작. ※ React에서 소문자로 시작하는 컴포넌트는 DOM 태그로 인식함. 🌟 컴포넌트의 구성요소 프로퍼티(Props) state 컨텍스트(Cont..

1. CRA(create-react-app) React 개발 환경을 쉽게 구축해주는 도구. 💻 CRA를 통해 자동으로 구축되는 요소: webpack: 모듈 번들러 babel: JSX를 JavaScript로 컴파일 jest: 기능 테스트 eslint: 코드 교정 및 스타일 맞추기(형상관리) polyfill: 구형 브라우저에서 지원하지 않는 문법(기능) 지원 HMR(Hot Module Replacement): reload 없이 변경사항 반영 CSS 후처리: sass 사용시 CSS 컴파일, 구형 브라우저에는 Vendor 접두사(perfix) 필요 ※ 단점: webpack, babel, eslint 등 설정 변경하기 어려움.(설정을 변경할 경우 eject) 2. CRA 사용 npx create-react-app..

1. 리액트(React) 페이스북(메타)에서 개발한 자바스크립트 라이브러리. 화면 출력에 특화되어 있다. 1) 리액트의 특징 (1) 컴포넌트(Component) 재사용이 가능한 각각의 작고 독립적인 모듈. 마치 레고 블럭... 이미 만들어진 컴포넌트들을 조합하여 화면을 효율적으로 구성하는 것이 리액트의 특징. 🌟 컴포넌트의 구성요소 프로퍼티(Props) state 컨텍스트(Context) (2) 가상돔(Virtual DOM) ✍🏻 브라우저에서 화면을 렌더링하는 과정 서버로부터 받는 파일을 파싱하여 DOM Tree와 CSSOM Tree를 만들고 결합 : 렌더트리(Render Tree) 생성. 생성한 Render Tree로 Layout을 계산하고 만든 후, 이 요소들을 실제로 화면을 그리는 Paint를 한다..