리액트 Portal
닥터 스트레인지는 전투 중에 불리하면 포탈을 만들어 상황을 용케 빠져나간다. 악당을 포털로 넣어 순식간에 상황을 종료시켜버리는 모습은 무척 통쾌하다. 비슷하게 리액트도 어플리케이션을 이동시키는 기능을 제공한다. 어플리케이션을 이동한다라는 조금 생소하긴 하지만 어플리케이션이 마운트되는 위치를 이동한다는 뜻이다. 루트 돔 트리를 벗어나 다른 돔에서 어플리케…
리액트 Ref
컴포넌트 상태와 프롭에 따라 리액트 엘리먼트를 동기화하는 것이 리액트로 UI 개발하는 기본 방향이다. 대부분 경우 이 구조로 개발하는 것이 엘리먼트를 직접 다루는 방법보다 더 낫다. 돔을 직접 수정하다보면 자칫 장황한 코드가 될 여기가 많기 때문이다. 그럼에도 불구하고 돔에 직접 접근할 수 밖에 없는 상황이 생긴다. 리액트는 이런 경우에 대비해 ref라는…
2022-05 스크랩
5/3 화 한 개의 메소드만 갖는 계층형 컨트롤러/서비스 패키지 스타일 이런 이름의 제한은 유지보수할 사람에게 강력한 힌트 제공 소리치는 아키텍쳐 "나는 영업 어드민이야!" 5/5 목 React Router v6 hooks 때문에 출시. 코드양 줄고, 용량 줄어 4kb useParams, useLocation 라이프 사이클의 전형적 불편함 중척 라우팅 -…
리액트 고차 컴포넌트(HOC)
훅을 주로 사용하는 지금에 비하면 비교적 철 지난 주제인 것 같다. 리액트 컴포넌트 로직을 재사용하기 위한 방법으로 고차 컴포넌트(High Order Component)를 사용한다. 써드 파티 라이브러리에서도 이 형태의 API 제공한다. 리액트 라우터는 withRouter 함수로 라우터의 일부 기능을 컴포넌트에 추가한다. 리액트 리덕스는 connect 함…
리액트 StrictMode
거의 사용해 보지 못했다. create-react-app에서 잠깐 봤는데 이걸로 프로젝트를 해본 경험이 없으니 정말 거의 사용한 적이 없었다. React의 Strict 모드가 무엇인지 문서 위주로 정리해 보자. 역할 자바스크립트에서는 엄격 모드가 있다. 코드 파일 상단에 "use strict"를 써 놓으면 자바스크립트를 실행할 때 조금 더 엄격하게 코드를…
리액트 라우터 만들기
요즘 react-router를 거의 만져보지 못했다. 회사에서 담당한 제품이 사용하지 않은 이유가 크다. 오랜 만에 봤더니 버전 6가지 나왔더라. 예전에 4를 썼던가? 부지런 해야겠다는 생각이 든다. 싱글페이지 어플리케이션의 가장 중요한 기능은 라우터다. 브라우져의 요청에 맞는 웹 페이지를 제공하는 것. 평소에 생각만 해봤다. '히스토리 API를 사용하면…
2022-04 스크랩
2022-04-01 금 Making Sense of React Hooks Why Hooks? 등장배경? 복잡한 컴포넌트를 작게 쪼갤수 없다. 상태 때문. 함수나 다른 컴포넌트로 분리 불가 그래서 이런걸 만든다. 거대한 컴포넌트: 리팩토링, 테스트 어려워 중복로직: 다른 컴포넌트와 라이프사이클 복잡한 패턴: 렌터 프롬, hoc 그래서 훅이 나왔다. 재사용할…
리액트 useContext는 어떤 모습일까?
지난 시간에 이어 useContext를 직접 만들어 보자. 서론 이전 글에서 컨택스트의 모양이 이렇겠지 하고 정리했는데 잘못된 것 같다. 글에서 만든 코드를 다시 읽어보니 제대로 동작하지 않을 것이 분명하다. 컴포넌트 계층 구조에서 부모-자식 간에는 프롭스(props)를 전달하면서 협력한다. 컴포넌트끼리 접촉해 있어야만 이 메세지를 전달할 수 있는 구조이…
리액트 useEffect는 어떤 모습일까?
지난 시간에 이어 useEffect를 직접 만들어 보자. 순수함수 순수함수란 무엇일까? 두 가지 특징이 있다. (참고: 위키피디아 Pure function) 입력이 같으면 결과도 같다. (the function return values are identical for identical arguments) 부작용(side effects)이 없다 (the …
리액트 useState는 어떤 모습일까?
함수는 값을 반환한다. 리액트 앨리먼트를 반환하는 함수를 리액트에서는 함수 컴포넌트(Function Component)라고 부른다. 클래스에 비해 함수가 간편한 것 처럼 함수 컴포넌트는 비교적 단순하다. 그만큼 제약도 있다. 함수 컴포넌트는 컴포넌트 생애 주기라는 것이 없다. 물론 클래스 컴포넌트가 제공하는 메소드도 없다. 컴포넌트가 생성되고 마운트 되고…
VIDEOS
만들면서 학습하는 리액트
2021년 05월 | 인프런프론트엔드 개발환경의 이해와 실습
2020년 03월 | 인프런Express.js 코드리딩
2019년 03월 | 유투브트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
2018년 11월 | 인프런견고한 JS 소프트웨어 만들기
2018년 06월 | 인프런Node.js 기반의 REST API 서버 개발
2018년 04월 | T아카데미실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
2018년 01월 | 인프런테스트주도개발(TDD)로 만드는 NodeJS API 서버
2017년 03월 | 인프런AngularJS 기본 개념과 To-Do 앱 만들기 실습 - 앵귤러 강좌
2016년 07월 | 유투브