React
1.[React] CRA (create-react-app) 시작하기
안녕하세요!오늘부터 React관련 포스팅을 해보겠습니다.이 번 포스팅의 내용인 create-react-app, 이 하 "CRA" 에 대해 알아보겠습니다.개발 툴은 Visual Studio Code를 사용했습니다.React는 UI기능만 제공합니다. 따라서 전역 상태관리,
2.[React] 동적임포트를 이용해서 간단한 TodoList만들어보기
안녕하세요!지난시간에 CRA개발환경을 준비해봤습니다.이번 포스팅에서는 간단한 TodoList를 만들어보며 , 동적임포트를 구현해보겠습니다.먼저 동적 임포트를 구현하는 이유는 사용자가 어떤 액션으로 요청을 했을 때, 필요한 JS파일만 내려줄 수 있기 때문입니다.(지금처럼
3.[React] CSS를 작성하는 방법들, css-module, sass, css-in-js
안녕하세요~오늘은 CSS를 작성하는 방법들을 알아보겠습니다.전통적인 방법으로는 CSS를 별도의 파일로 저장하고 HTML의 link태그를 이용해 적용합니다.리액트에서는 컴포넌트 아키텍쳐를 이용하기때문에 컴포넌트 간의 의존성을 최소화하고 내부 응집도를 높히는게 좋습니다.따
4.[React] react-router-dom 시작하기
안녕하세요이번 포스팅은 SPA앱을 만들 때 많이 사용되는 react-router-dom패키지에 대해 알아보겠습니다.create-react-app을 이용해 진행했습니다.react-router - 웹&앱react-router-dom - 웹react-router-native
5.[React] state와 setState()
안녕하세요!오늘은 state와 setState에 대해서 알아보겠습니다.리액트의 강점 중 하나는 컴포넌트의 UI데이터가 변경될 때마다 자동으로 다시 render하는 것 입니다.각 컴포넌트의 UI데이터가 state이고, 컴포넌트는 state가 변경되면 다시 render합니
6.[React] React요소, 생성과정
안녕하세요createElemet함수에 대해 알아보고, 리액트의 요소들에 대해 알아보겠습니다.JSX문법으로 작성한 코드는 바벨 플러그인이 리액트의 createElement함수로 변경해줍니다.React는 가상돔을 이용하며, 실제 돔과 비교해 변경된 부분만 실제 돔에 반영한
7.[React] 생명주기(1) - 초기화단계(constructor, getDerivedStateFromProps, render, ComponentDidMount), Memoization, 완전제어, 완전비제어 컴포넌트
안녕하세요!리액트에서 굉장히 중요한 부분을 차지하는 생명주기에 대해 알아보겠습니다. 모든 컴포넌트는 다음과 같이 세 가지 단계를 거칩니다. 초기화단계업데이트단계소멸단계각 단계에서 몇 개의 메서드들이 정해진 순서대로 되며, 각 단계 속에서 호출되는 메서드를 생명주기 메서
8.[React] 생명주기(2) - 업데이트단계,소멸단계 (shouldComponentDidUpdate, getSnapshotBeforeUpdate, componentDidUpdate, getDerivedStateFromError, componentDidCatch)
안녕하세요!이어서 생명주기에 대한 포스팅입니다.모든 컴포넌트는 다음과 같이 세 가지 단계를 거칩니다.초기화단계(링크)업데이트단계소멸단계오늘은 업데이트단계와 소멸단계에 대해 포스팅하겠습니다.그림의 업데이트할 때 부분을 봐주세요.업데이트단계는 세 가지 시작점이 있습니다.속
9.[React] errorBoundary 만들기 (getDerivedStateFromError, componentDidCatch)
안녕하세요!오늘은 errorBoundary를 만드는 법에대해 알아보겠습니다.componentDidCatch와 getDerivedStateFromError를 이용해 만들게됩니다.지난 포스팅에서 마지막부분에 getDerivedStateFromError, componentD
10.[React] Context API 사용하기 (React.createContext)
안녕하세요!Context API에 대한 포스팅입니다.보통 상위컴포넌트에서 하위컴포넌트로 데이터를 전달할 때 속성값이 사용됩니다. 가까운 거리의 컴포넌트끼리는 괜찮지만, 깊이기 깊어질 수록 코드를 반복적으로 작성해야 합니다.기계적으로 컴포넌트마다 전달하고 전달하는 방식은
11.[React] 깔끔한 조건부렌더링 작성하기
안녕하세요! 조건부렌더링에 관한 포스팅입니다.리액트로 컴포넌트를 만들다보면 props나 state에 따라 달라지는 컴포넌트를 반환하고 싶을 때가 있습니다.조건부렌더링을 깔끔하게 작성하면, 코드의 가독성이 높아집니다.이런 폼을 만들어볼게요나이가 14세 미만일경우 "14세
12.[React] prop-types으로 속성값 정의하기
안녕하세요 prop-types에 대한 포스팅입니다.prop-types는 Reactv15.5 이전에는 React.PropTypes였습니다. 이후에 별도의 라이브러리 prop-types로 이동했습니다.prop-types는 속성값의 타입 정보를 정의할 때 사용하는 리액트 공
13.[React] 이벤트처리(1) - (this바인딩, 클래스필드-class field, 화살표함수)
안녕하세요!이번 포스팅은 리액트에서 이벤트핸들링하는 방법들을 알아보겠습니다.이벤트핸들링하는 방법들의 중심에는 함수바인딩과 성능문제 이슈가 있었습니다.이벤트 처리 메서드가 컴포넌트 인스턴스에 접근할 필요가 없다면 클래스 바깥에서 정의할 수 있습니다. 반대로, "this"
14.[React] 이벤트처리(2) - HTML dataset 사용법
안녕하세요!dataset에 대한 포스팅입니다.dataset은 HTML표준에 정의된 기능입니다.W3Schools에서 dataset 보기 링크돔 요소에서 값을 저장하고 자바스크립트 코드에서 그 값을 읽어 들일 수 있습니다. dataset을 이용해서 이벤트 처리 함수를 구현
15.[React] 공통기능분리(1) - 고차컴포넌트(Higher-Order-Components)
안녕하세요!이번 포스팅은 공통기능을 관리하기 위해 사용하는 고차컴포넌트에 대한 포스팅입니다.컴포넌트를 작성하다보면 반복적인 로직을 작성하는 경우가 생깁니다.고차컴포넌트는 컴포넌트를 입력받아 어떤 기능을 수행 후 컴포넌트를 반환합니다.반복적인 로직을 고차컴포넌트를 이용해
16.[React] 공통기능분리(2) - 렌더속성값 (렌더속성값 패턴으로 githubAPI 이용하기)
안녕하세요! 공통기능을 관리하는 방법 두 번째 Ref속성값에 대한 포스팅입니다. Ref속성값은 코드 재사용을 위해 함수 타입의 속성값을 이용하는 패턴을 말합니다. 기본형태 기본형태에 대해서 알아보기전에 리액트 요소를 다시 한 번 살펴볼 필요가 있었습니다. 리액트요
17.[ReactHook] useState() 와 useEffect() 로 상탯값과 생명주기 사용하기
안녕하세요!리액트 훅에 대한 포스팅입니다!훅은 리액트 버전 ^16.8부터 사용할 수 있는데요리액트 문서에서는 훅을"함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동, 연결 (hook into) 해주는 함수"라고 이해하면
18.[ReactHook] 리액트 내장훅 사용하기 (useContext, useRef, useMemo, useCallback, useReducer, ...)
안녕하세요 React의 내장훅에 대한 포스팅입니다.리액트에서 기본적으로 제공되는 내장훅들을 다양하게 활용하기 위한 목적으로 포스팅합니다.useContext는 클래스형 컴포넌트에서 사용했던 ContextAPI를 함수형 컴포넌트에서 사용할 수 있게 해줍니다. 클래스형 컴
19.[ReactHook] 클래스형컴포넌트의 생명주기를 Hook으로!
안녕하세요!훅에 대한 세번째 포스팅입니다.Hook에대한 공부를하면서,클래스형 컴포넌트를 좋은 방향으로 대체할 수 있겠구나라는 생각을 했습니다.상탯값관리, Side Effect수행, 공통기능관리 등에대해 알아봤었는데요오늘은 클래스형 컴포넌트의 생명주기들을 Hook으로 대
20.[React] 브라우저 히스토리 API
안녕하세요! 브라우저 히스토리 API는 직접적으로 React와 연관된 건 아니지만, SPA에서 자주 쓰이는 react-router-dom처럼, 클라이언트사이드 라우팅을 구현하려면, javascript의 브라우저 히스토리 API에 대한 이해가 필요합니다. SPA는 최