FrontEnd/React 썸네일형 리스트형 왜 리액트 훅 선언은 특정 규칙이 있을까? Why declare hooks at the top level? Ensures Consistent Behavior 리액트는 여러가지 hooks가 있다. 그 중 대표적으로 UseEffect, UseState , UseCallback 등의 hooks가 있는데, 이러한 훅들은 순차적인 order로 선언되어야 하며 이러한 order로 부터 리액트는 render 시에 어떠한 순서에서 어떠한 훅을 호출해야 하는지 파악 할 수 가 있다. Ref: https://legacy.reactjs.org/docs/hooks-rules.html#explanation Improve Readability and Maintainability top에 hook들(useEffect, useState, useMemo 등)을 선언 함으로써,.. 더보기 MobX vs Redux Toolkit MobX와 redux Toolkit은 둘 다 React 애플리케이션에서 상태 관리를 할 때 사용되는 라이브러리이다. 두 라이브러리 모두 장단점이 있으며, 사용자의 요구사항에 따라 적합한 라이브러리를 선택해야 한다. MobX는 간단하고 직관적인 API를 제공하며, 특히 복잡한 애플리케이션에서 상태 관리를 쉽게 할 수 있다. 또한, MobX는 자동으로 데이터를 관찰하고 업데이트하기 때문에 개발자가 별도로 상태 변화를 감지하거나 업데이트를 수행할 필요가 없다. 이는 애플리케이션 개발을 더욱 빠르고 쉽게 만들어 준다. 반면, Redux Toolkit은 Redux의 기능을 보완하고 개발자의 작업을 단순화하는 데 중점을 둔 라이브러리 라고 한다. Redux를 사용하면 복잡한 애플리케이션의 상태 관리를 보다 체계적이.. 더보기 간단한 리덕스의 세 가지 규칙 더보기 리덕스 공부하며 요약한 세 가지 규칙을 작성 해본다. 1. 단일 스토어 하나의 프로젝트 안에는 하나의 스토어만 존재. - 하나의 프로젝트 안에 여러 스토어를 만들 수도 있지만, 상태 관리가 복잡해질 수 있으므로 권장 X 2. 읽기 전용 상태 - Read only 리덕스의 상태는 read-only 임. 따라서 업데이트하는 과정에서 불변성을 지켜 주기 위해 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 함 - ex.) spread 연산자 or immer library 리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문. 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥.. 더보기 JSX 문법에서 왜 여러 Element 들은 하나의 최상위 element에 감싸져 랜더 되어야 하는건가? Virtual DOM에서 컴포넌트 변화를 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다. const Categories = () => { return ( // ( onSelect(c.name)} > {c.text} ))} ); }; export default Categories; 그럼 왜 Virtual DOM은 컴포넌트 변화를 효율적으로 비교하기 위해서, 하나의 DOM 트리 구조가 요구 되는 걸까? Element가 30개가 바뀌었다고 reflow를 30번씩 새로 하는 것이 아니라 모든 변화를 하나로 묶어서 딱 한번만 실행시키기 위해서 - 즉 reflow를 최소화 시키기 위해서 더보기 VScode 에서 코드 save 할 때마다 prettier 동작 1. ⌘ ( command ) + ',' 실행 함으로써 VSCode Setting 오픈 2. Default Formatter 검색 3. Default Formatter 값을 Prettier로 변경 4. Format On Save 검색 후, 해당 박스 체크 더보기 Implement multiple styles into the inner style prop Inner style prop에 다중 스타일 적용 하기 Example 1) Style object 에 특정 조건에 따라 스타일을 적용 시킬 경우. style={ tempVaraiable ? {backGround: 'red'} : {background: 'blue'} } Example 2) Style object 에 특정 조건에 따라 다중 스타일을 적용 시킬 경우 style={Object.assign( { cursor: currentCellData.onClick ? 'pointer' : 'inherit' }, currentCellData.style && currentCellData.style )} - 2개의 스타일 object 를 Object.assign() 을 통해 통합 하고 style prop 으로 전달 더보기 Context API vs Redux Context - Context 란, 모든 컴포넌트들끼리 props를 명시적으로 서로 전달하지 않고 (일반적으로 하향식: 부모 -> 자식), 서로 어디서든 동등 하게 context에 접근해서, 상태 값에 접근할 수 있는 방법을 제공한다. 1. Context는 실제로 어떠한 상태값도 관리 하지 않는다. 단순 값을 전달하는 파이프와 같다 할 수 있다. 2. Context 는 State Management를 위해 쓰이지 않는다. - Context는 props drilling 을 방지 하기 위해 쓰인다 3. Context 는 전달되는 값 ( 부모 -> 자식 (하향식) props 전달 )을 결정하는 역할을 한다 Redux - Redux 란, 기본적으로 해당 라이브러리에서 제공하는 패턴과 도구들을 사용하면 Comp.. 더보기 Class Component vs Functional Component Class Component vs Functional Component 1. 클래스 컴포넌트는 기본적으로 React 에서 Extend 된 컴포넌트 인 반면, 함수 컴포넌트는 plain Javascript function 이다. 때문에 클래스 컴포넌트는 React element (JSX) 를 리턴 할 수 있는 render function 이 필요 2. 라이프사이클이 다름: 함수 컴포넌트는 componentDidMount, componentWillMount 등 이 없고 UseEffect만 있음 더보기 이전 1 다음
