https://wonillism.tistory.com/264 [리액트를 다루는 기술] Hooks (1) Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 wonillism.tistory.com useMemo useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. import React, { useState } from 'react'; const getAverage = nums => { console.log('평균값 계산 중...'); if (nums.length === 0) return 0; const sum..

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 루트를 ..

https://meetup.toast.com/posts/92 REST API 제대로 알고 사용하기 : NHN Cloud Meetup REST API 제대로 알고 사용하기 meetup.toast.com REST, Representational State Transfer의 약자로서 2000년도에 Roy Fielding의 박사학위 논문에서 최초로 소개되었다. Roy Fieilding은 HTTP의 주요 저자 중 한 사람으로 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다. REST 구성 Resource(자원) : URI Verb(행위) : HTTP METHOD Representations(표현) REST ..

API란? Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스는 응용 프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. API는 레스토랑의 '점원'이다. 레스토랑에서 손님에게 주문 가능한 메뉴를 보여주고 손님이 고른 음식을 주방에 전달 후, 음식이 나오면 고객에게 전달하는 '점원'이 API이다. 쉽게 말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있다. API의 역할 API는 서버와 데이터베이스에 대한 출입구 역할을 한다. 데이터베이스에는 소중한 정보들이 저장되므로 모든 사람들이 데이터베이스에 접근할 수 있으면 안 된다. API는 이를 방지하기 위해 여러분이 ..