홈 | 김정환 블로그

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

VIDEOS