FrontEnd/React
Hooks
Hook이란? - 리액트 버전 16.8에서 생긴 개념 - 최근 리액트 개발은 대부분 hook을 사용 Function Component Class Component state 사용 불가 생성자에서 state를 정의 Lifecycle에 따른 기능 구현 불가 setState() 함수를 통해 state 업데이트 Hooks Lifecycle methods 제공 원하는 시점에 정해진 함수를 호출하기 위함 대표적인 Hook useState() state를 사용하기 위한 Hook // useState 사용법 const [변수명, set함수명] = useState(초기값); //useState()함수 필요한 예제 import React, { useState } from "react"; function Counter(pr..
State and Lifecycle
State 리액트 Component의 변경 가능한 데이터 state는 개발자가 정의하며 Javascript 객체이다. State 정의시 중요한 점 반드시 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 왜냐하면 컴포넌트가 불필요하게 다시 렌더링되어 성능저하를 유발시킴 그렇지 않은 값은 인스턴스 필드로 정의 class LikeButton extends React.Component { // 생성자 constructor(props) { super(props); // state 정의부 this.state = { liked: false }; } ... } // state는 컴포넌트의 렌더링과 관련이 있어 // 임의로 수정시 개발자의 의도대로 작동하지 않을 가능성이 있음 // 고로 setState..
Components and Props
Components 리액트는 Component기반 (Component-based)의 구조 작은 컴포넌트들이 모여 하나의 컴포넌트를 구성하고 이러한 컴포넌트들이 모여 전체 페이지를 구성 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. Props property의 준말인 prop의 복수형이며 react에서 prop은 속성이라는 뜻으로 사용된다. 리액트 컴포넌의 속성이자 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다. Props의 특징 Read-Only (값을 변경 할 수 없다) 모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고 같은 Props에 대해서는 같..
Rendering Elements
Elements란? Elements are the smallest building blocks of React apps 리액트 앱을 구성하는 가장 작은 블록들 DOM Element React Element Browser DOM Virtual DOM 많은 정보 / 크고 무거움 간략화 / 가벼움 React Elements 생김새 자바스크립트 객체 형태로 존재하며 불변성(Immutable)을 가짐 // 변환 전 React Element { type: 'button', props: { className: 'bg-green', Children: { type: 'b', props: { children: 'Hello element!' } } } } // 변환 후 DOM element Hello element! cre..
JSX
JSX란? A syntax extension to Javascript 자바스크립트의 확장 문법 Javascript + XML / HTML JSX 예제 코드 const element = Hello, world!; JSX의 역할 내부적으로 XML, HTML 코드를 Javscript로 변환하는 과정이 발생 결과적으로 Javscript 코드가 나옴 이 변환 과정을 하는것이 React의 createElement함수이다. React.createElement( type, // div, span등의 html태그 혹은 다른 React Component [props], [...children] // element가 포함하는 자식 element ) JSX 사용 코드 class Hello extends React.Compon..
React란
리액트란? A JavaScript library for building user interfaces 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 Javascript 기능 모음집 https://ko.legacy.reactjs.org/ 특징 SPA Single Page Application 하나의 페이지만 존재하는 웹사이트 또는 웹 어플리케이션 장점 빠른 업데이트 & 렌더링 속도 웹사이트 탐색시 내용의 변경이 빠름 Virtual DOM Virtual Document Object Model 웹사이트의 정보를 모두 담고있는 큰 그릇 DOM : 수정부분을 DOM에서 모두 찾고 이를 업데이트 Virtual DOM : 업데이트할 최소한의 부분만 ..