javascript는 C, Java등과 같은 언어와 구별되는 아래와 같은 특성이 있다. - Prototype-based Object Oriented Language - Scope와 this - 동적 타입(dynamic typed) 언어 혹은 느슨한 타입(loosely typed) 언어 이와 같은 특성때문에 C, Java등에 익숙한 개발자를 혼란스럽게 하고 코드가 복잡해질 수 있고 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있다. 이런 Javascript의 문제를 극복하고자 Typescript가 만들어지게 되었다. Prototype-based Object Oriented Language 프로토타입 기반 객체 지향 언어는 클래스 기반 언어에서 상속을 사용하는 것과 다르게, 객체를 원형으로 하여 ..

React에서 CSS를 입힐 때 여러모로 불편한 점이 많다. css파일을 import 해서 사용하면 class 이름을 일일이 관리해주어야하고 인라인으로 작성된다면 가독성이 좋지 않다. 중복되는 코드들도 해결하고 싶은경우가 많다. 이러한 불편한 점을 많이 해소해주는 것이 styled-components이다. https://styled-components.com/docs styled-components: Documentation Learn how to use styled-components and to style your apps without stress styled-components.com styled-components 문서에서 다양한 기능들을 확인해 볼 수 있다. 간단한 사용법은 아래와 같다 imp..

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