useComponentWillMount??
라이프 사이클의 굴레에서 벗어나
19 POSTS
React 3
Prop drilling 해결을 위해 context를 사용하기 전에 구조를 생각해보자.
처음부터 구조를 잘 생각해 둔다면 성능상 에 이점을 가져갈 수 있다.
리액트의 Hooks과 HOC, HOC의 사용이 복잡해지는 경우
HOC는 좋지만, hooks을 사용하는 습관을 기르자.
리액트의 useState와 lazy initialization
리액트 최적화의 길은 멀고도 험하다
Create React App의 serviceWorker는 무엇일까
가끔 봤지만 전혀 궁금해 하지 않았던 그 것
styled-components로 스타일 적용하는법
styled components가 쓰고 싶습니다
useEffect는 라이프 사이클 메소드가 아니다.
생각없이 useEffect를 쓰지 말자
useCallback 사용 가이드
아직도 useCallback으로 고통 받다니
리액트 v17.0 살펴보기
리액트 17.0 새로운 기능은 추가되지 않을 예정. 점진적 업그레이드 추가, 이벤트 위임 방식 변경이 주요 변경 내용인 것 같네용.
프론트엔드 개발자가 알아야 하는 Angular와 React의 Change Detection
[What every front-end developer should know about change detection in Angular and React](https://indepth.dev/what-every-front-end-developer-should-know-about-change-detection-in-angular-and-react/)를 번...
리액트 고차 컴포넌트 (React Higher Order Component)
[이 글](https://ko.reactjs.org/docs/higher-order-components.html)이 한글로 번역이 안되있어서 대충 번역해봅니다. # Higher-Order Components 고차 컴포넌트 (이하 HOC)는 리액트에서 컴포넌트 로직을 재사용하기 위한 고오급 기술이다. HOC는 리액트 API의 일부분은 아니다. 이는 리액트...
React count down에서 배운 event-emitter 와 requestAnimationFrame
# 리액트에서 카운트 다운을 만들며 배운 것들 리액트에서 카운트 다운을 만든다고 가정해보자. 가장 먼저 생각나는대로, 빠르게 구현한다면 아래와 같은 느낌이 될 것이다. https://codepen.io/yceffort/pen/BayPyNe 하지만 이 코드는 한가지 문제를 가지고 있다. ## setInterval, setTimeout `setInte...
리액트 텍스트 하이라이트 만들기
리액트에서 텍스트 강조하는 방법
리액트 면접 질문 모음 (2)
[목차](/2019/08/13/reactjs-interview-questions/) # table of contents ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## React Router ### What is React Router? React Router는 리액트 최상단에 있는 강력한 라우...
리액트 면접 질문 모음 (1)
[목차](/2019/08/13/reactjs-interview-questions/) ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## Core React ### What is React 리액트는 오픈소스 프론트엔드 자바스크립트 라이브러리로, 특히 싱글 페이지 애플리케이션의 사용자 인터페이스 구축을...
리액트 면접 질문 모음
[원문-reactjs-interview-questions](https://github.com/sudheerj/reactjs-interview-questions) [1. Core React](/2019/08/13/reactjs-interview-questions-1/) [2. React - Router, Internationalization, Redux,...
React Hooks Api (2)
### useReducer ```javascript const [state, dispatch] = useReducer(reducer, initialArg, init); ``` `useState`의 대체 함수다. 다수의 하윗 값을 만드는 복잡한 로직, 혹은 다음 state가 이전 state의 의존적인 경우에 쓴다. 뭐가 뭔지 모르겠으니까 예제를 보자. ...
React Hooks Api (1)
# Hooks API Hook은 react 16.8에서 추가된 개념으로, Hook을 시용하면 class를 갖성하지 않아도 state관리와 같은 react의 기능을 사용할 수 있다. ## 기본 Hook ### useState ```javascript const [state, setState] = useState(initialState); setStat...
Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기
이 문서는 더 이상 업데이트 하지 않을 생각이다. 대신 https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate 여기에서 계속 해서 만들어 가고 있다. ## 사용한 오픈소스 ### React 자세한 설명은 생략 한다 ### Nextjs [NextJs](https://nextjs.org...