Javascript/React

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. useState useState는 가장 기본적인 Hook이며, 가변적인 상태를 지닐 수 있게 해준다. import React, { useState } from 'react'; const Counter = () => { // const [상태 값, 상태 설정 함수] = useState(초기값); const [value, setValue] = useState(0); return ( value : {value} setValue(value + 1)}> +..

프로젝트를 진행하면서 어떤 것에 대한 인증 후에 인증이 완료되면 다른 페이지로 라우팅하는 과정에서 자꾸 오류가나서 리액트 라이프 사이클에 대해 확실히 알아보고자 한다. 모든 리액트 컴포넌트에는 라이프 사이클이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉가지이다. 이것을 총 세 가지, Mount, Update, DidMount 카테고리로 나눈다. Mount 마운트 DOM이..

https://ko.reactjs.org/docs/thinking-in-react.html React로 사고하기 – React A JavaScript library for building user interfaces ko.reactjs.org 목업으로 시작하기 JSON API와 목업을 받았다고 가정하면 다음과 같을 것이다. [ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, {category: "Sporting Goods", price: "$29.99", stocked: ..

React로 프로젝트를 진행하면서 무작정 따라하면서 만들다보니 머리속으로 정리가 안돼서 중요하게 느껴지는 개념들을 정리해보기로했다. Props Props란, Properties의 줄임말이다. props는 Component의 configuration(옵션 값)이며, Component에게 전달된 시점에서 immutable(불변) 하다. 그렇다면 props가 하는 역할은 무엇일까? 상위 컴포넌트가 하위 컴포넌트에게 전달하는 데이터로, 하위 컴포넌트에서 읽기 전용으로 사용된다. // First Component const First = () => { return ; } export default First; // Second Component const Second = ({ name }) => { return ..

리덕스에 대해서 알아보기 전에 대략적인 개념을 알아보자. 파란색 블록이 녹색 블록의 정보를 수신하려면 녹색 블록 내부에 있어야 한다. 주황색 블록에서 녹색 블록 안에 있는 정보가 필요한 경우 검정색 블록으로 이동해야 한다. 이처럼 블록에 다른 구성요소가 있는 정보가 필요한 경우 이 정보를 두 구성 요소에 공통적인 상위 구성 요소로 이동해야 하기 때문에 문제가 있었다. 복잡하고 큰 응용 프로그램이 있고 최상위 구성 요소에서 최하위 구성 요소로 데이터를 전달해야 한다고 생각해보자. 아마도 매우 복잡한 코드를 작성하게 될 것이다.(A 컴포넌트가 G 컴포넌트에 접근해 무언가 하려고 한다면 A ▶ B ▶ C ▶ D ▶ E ▶ F ▶ G 순서로 접근 후, 다시 G ▶ F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 ..

템플릿(template) 이란? user interface를 다룰 때 사용할 수 있고, 보통 data set이 주어지면 HTML 태그 형식을 문자열로 반환한다. 컴포넌트(component)란? 다른 framework에서 user interface를 다룰 때 사용하는 템플릿과는 다른 개념이다. 컴포넌트는 재사용이 가능한 API로 많은 기능들이 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고, 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여 줄..

Virtual DOM https://wonillism.tistory.com/214 [Javascript] DOM 이란? BOM이란? Browser Object Model의 약자로 브라우저와 관련된 객체들의 집합으로서 BOM을 이용하여 Browser와 관련된 기능들을 구성한다. 이 BOM을 이용해서 Browser와 관련된 기능들을 구성한다. BOM의 최상위 wonillism.tistory.com Virtual DOM을 알아보기전에 이전에 알아보았던 DOM을 짚고 넘어가자. DOM에는 치명적인 한 가지 문제점이 있다. 바로 동적 UI에 최적화되어 있지 않다는 것이다. HTML은 자체적으로 정적이므로 자바스크립트를 사용하여 이를 동적으로 만들 수 있다. 하지만, 요즘 흔히 접하는 큰 규모의 웹 애플리케이션들을..

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC, MVW 등인 프레임와크와 달리 오직 View만 신경 쓰는 라이브러리이다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 component(컴포넌트)라고 한다. 다른 프래임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다. 템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데, 이와 달리 컴포넌트는 좀 더 복합적인 개념이다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 초기 렌더링 렌더링이란 사용자 화면에 뷰를 보여주는 것이다. render() { .....