본문 바로가기

REACT

 (187)
리액트 엘리먼트에 $$typeof 속성이 존재하는 이유 리액트 엘리먼트에 $$typeof 속성이 존재하는 이유를 알아봅니다. TLDR : XSS 공격 방지 원문입니다 : https://overreacted.io/why-do-react-elements-have-typeof-property/ Why Do React Elements Have a $$typeof Property? It has something to do with security. overreacted.io JSX는 사실 리액트 엘리먼트로 컴파일되고 리액트 엘리먼트는 JSON으로 컴파일됩니다. hi JSX를 작성한다 생각했지만, 실제로, 당신은 함수를 호출하고 있습니다: React.createElement( /* type */ 'marquee', /* props */ { bgcolor: '#ffa7c..
리액트가 함수 컴포넌트와 클래스 컴포넌트를 구분하는 방법 React는 함수 컴포넌트와 클래스 컴포넌트를 어떻게 구분하나요? 원문 : https://overreacted.io/how-does-react-tell-a-class-from-a-function/ How Does React Tell a Class from a Function? We talk about classes, new, instanceof, prototype chains, and API design. overreacted.io 본문 내용은 리액트보다는 js에 관한 내용입니다. 개발하는데 몰라도 전혀 지장없는 내용이니 스킵하셔도 됩니다. TLDR : 리액트는 React.Component를 상속한 클래스만 클래스 컴포넌트로 취급합니다. 해당 클래스의 객체 플래그를 이용해 리액트는 해당 컴포넌트가 클래스..
리액트 : 리렌더링 하도록 코딩하기 (부제 : memo 대신 useMemo) 리액트의 리렌더링은 다양한 원인으로 일어난다. 그 중 가장 리렌더링을 자주 유발하는 원인은 상단 컴포넌트의 리렌더링에 의한 하위 컴포넌트들의 리렌더링이다. (그러면서 가장 불필요한 리렌더링을 자주 발생시킨다.) 이는 구조적 리팩토링 (composition)으로 해결한다. https://reactjs.org/docs/composition-vs-inheritance.html Composition vs Inheritance – React A JavaScript library for building user interfaces reactjs.org 분명히 상태를 잘 쪼개고, 리덕스나 리액트 쿼리를 사용하는 경우 셀렉터를 아주 잘 쪼개면 관심사의 분리와 유지보수성,성능 세가지 토끼를 한번에 잡을 수 있다. 하지만..
javascript 프로젝트에 d.ts를 이용하여 타입스크립트 도입하기 javascript를 메인으로 사용하는 프로젝트에 사정상 코드베이스를 타입스크립트로 마이그레이션 할 수 없을 때, d.ts를 통해 타입스크립트의 힘을 활용하는 방법을 알아봅니다. 해당 내용은 사내에서 프로젝트를 진행하며 배운 내용을 정리한 것임을 말씀드립니다. d.ts파일이란? 기본적으로 c언어의 header와 같은 역할을 합니다. 즉 각 모듈(파일)에 대한 인터페이스 역할만 하지, 모듈 내부의 타입 안정성에 대해서는 전혀 보장해주지 않습니다. 하지만 d.ts파일을 js파일의 타입 체킹에 이용할 수 있습니다. [Front, 2022-09-14] Typescript d.ts 파일을 js 프로젝트에서 사용할 수 있을까? d.ts 파일의 타입 선언 활용하기 d.ts 파일 내부에서는 타입 선언과 변수, 함수 선..
스토리북 개발팀이 알려주는 컨테이너 / 프리젠터 패턴 - Context API를 이용해 의존성 주입하기 스토리북 공식 문서에서 container / presenter 패턴의 사용 사례에 대해 배워봅니다. 스토리북을 전혀 몰라도 패턴에 대해 배우실 수 있습니다. 페이지(화면)을 만드는 방법 BBC, Guardian 및 Storybook 유지보수 팀은 순수한 프레젠테이션 페이지를 만듭니다. 이 방법을 사용하면 Storybook에서 페이지를 렌더링하기 위해 특별한 작업을 수행할 필요가 없습니다. 여기서 특별한 작업이라 함은 모킹, 몽키 패치를 이용한 의존성 주입을 의미합니다. 화면 단계까지 프리젠테이셔널 컴포넌트로 작성하는 것은 간단합니다. 스토리북 외부에 있는 앱의 단일 래퍼 컴포넌트에서 모든 지저분한 "connected" 논리를 수행한다는 아이디어입니다. 스토리북 소개 튜토리얼의 Data 장에서 이 접근 방..
리액트 디자인 패턴 : 컴파운드 컴포넌트 패턴 [Compound Component Pattern] 2 리액트 디자인 패턴 : 컴파운드 컴포넌트에 관해 알아봅니다. 원문 : https://isamatov.com/compound-components-react/ Compound Component – advanced React pattern UI libraries love Let's take a look at an advanced React pattern - Compound Component. This pattern is widely adopted by a lot of popular UI libraries. isamatov.com 이번 포스트에서는 널리 사용되는 React 패턴인 Compound Component에 대해 알아보겠습니다. 이 패턴을 사용하면 클린하고 선언적인 방식으로 복잡한 컴포넌트를 작성할 수 ..
리액트 쿼리 : 셀렉터와 폴더 구조 리액트 쿼리 셀렉터 실무 사용 경험, 폴더 구조에 대한 생각을 공유합니다. 리액트 쿼리 셀렉터 놀랍게도 리덕스처럼 리액트 쿼리에는 셀렉터가 있습니다. export const useTodosQuery = (select, notifyOnChangeProps) => useQuery(['todos'], fetchTodos, { select, notifyOnChangeProps }) 위와 같이 셀렉터를 파라미터로 받아 사용할 수 있도록 하는게 좋을까요? 결론은 아닙니다. 리액트 쿼리의 api 디자인은 실제로 리덕스의 영향을 꽤 많이 받았으며, 리덕스의 핵심 철학 중 하나는 함수형 프로그래밍 원리를 따르는 것입니다. 이를 고려하면 데이터의 모양을 캡슐화해야 합니다. 셀렉터 함수의 중복, 메모화, 데이터 캡슐화를..
[번역] Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy 실무에서의 리덕스의 활용방법과 리덕스의 철학에 대해 좀 더 자세히 알아봅시다. 1편 번역 : https://itchallenger.tistory.com/685 원문 : https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/ Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy More thoughts on what Redux requires, how Redux is intended to be used, and what is possible with Redux blog.isquaredsoftware.com 리덕스 활용 Redux 앱에서 사용되는 일반적인 ..

티스토리툴바