FrontEngineer JungBam

props에 따른 리렌더링에 제한을 두어 리렌더링으로 인한 앱의 성능이 저하될 때 사용하는 방법 너무 잦은 실행은 오히려 메모리할당으로 인한 성능저하를 야기할 수 있기 때문에 같은 props로 인해 같은 결과의 렌더링이 반복되는 컴포넌트나 혹은 복잡한 로직으로 인하여 렌더링에 있어 성능 이슈가 생길 컴포넌트만 사용하는 것이 좋음. **사용 방법** props 체크를 할 컴포넌트에서 memo를 import import {memo} from 'react' 함수 컴포넌트가 export되는 곳에 memo로 감싸서 체크해주도록 하기 export default memo(memoComponent)

리렌더링은 다시 한번 함수형 컴포넌트가 마운트되어지면서 함수형 컴포넌트 내부에 있는 코드들이 실행되는 것을 이야기한다.(물론 useEffect는 별개의 문제이고) 이 함수형 컴포넌트가 불려지면서 useState가 실행되고 useState를 통해 초기값을 부여했을 때 신기한 것을 알았다. 우리가 알듯 useState는 초기값으로 먼저 실행되었다가 상태값을 변경해주는데 소켓작업이나 로컬스토리지 작업을 하는 state를 초기화된 단계에서 다시한번 실행된다면? 신기하게도 초기화된 값이 나온다.(내가 생각하지 않은 결과이기 때문에 당연히 조치가 필요하다.) 이러한 문제를 해결해주는 것이 사이드 이펙트에서의 초기값 계산이다. 사이드 이펙트는 이 스크립트가 실행될 때 함수형 컴포넌트 이전에 실행되어지고 함수형 컴포넌..

와 진짜... rfce 개꿀이다. html에서 ! 가 있다면 리액트에는 rfce.. 자동으로 해당 js파일 이름으로 함수형 컴포넌트의 뼈대를 만들어준다.

1. 리액트 훅은 함수형 컴포넌트 또는 리액트 커스텀 훅에서 사용된다. 2. 최상위 단계에서 호출(함수형 컴포넌트 내부 최상위 스코프, 커스텀 훅 최상위 스코프) 3. useEffect : 참조하는 prop와 state를 의존성 배열에 추가한다. (의도하여 제외하는경우는 예외) 위의 3가지는 Max가 강의에서 한 애기들이다. 3번에 대해서 스스로 정의 내린 것은 렌더링의 원리를 안다면 렌더링과 관리되는 상태에 따라서 의존성 배열을 고민하고 그에 따라서 의존성 배열에 추가하는 것을 추천한다.

import React from 'react' const context = createContext({ isLoggedIn : false, isLogout : ()=>{} }) export default context createContext를 할 때에 매개변수로 주는 값들은 context 사용간 자동완성 기능으로 불러올 수 있게된다. 위의 코드에서 isLoggedIn과 isLogout은 자동완성기능으로 작성할 수 있게 되는 것. 이 코드들은 자동완성 기능을 주는 목적이기 때문에 더미로 작성하면 된다.(like 위) * 추가로 로그인 인증에 대한 부분을 프로젝트의 거의 모든 페이지에서 사용하기 때문에 이러한 점을 고려했을 때에는 로그인 인증에 대한 기능들은 context로 처리하는 것도 좋아보인다.

key는 리액트가 렌더링간 참조하는 값이기 때문에 고유 식별자로 주는 것. 이 key를 index로 처리했을 때에는 렌더링에 문제가 발생할 가능성이 있기 때문에 index를 이용한 고유 식별자 key를 만들어서 주면 좋다. `what ${index}`

전역에서 관리해야 하는 데이터를 props로 넘기지 않고도 전달할 수 있는 리액트 훅 (prop Driling을 하면서 발생하는 불필요한 전달과정을 생략할 수 있음.) context 만들기 import { createContext } from 'react' export const HandlerContext = createContext(null) context API의 createContext 를 통해 context를 만들어주고 이 context의 provider로 해당 컴퍼넌트 전역에 값이나 변수를 전달해주는 것이다. 이 context에 저장된 값들은 결국 하위 컴포넌트에서 사용을 하겠다고 신청을 해야하는데 그것이 바로 useContext 훅이다. 사용신청을 위한 훅은 간단하다. 객체분할을 통해 cont..

항해 1주차 과제를 마치고 소름이 돋았다.. 리액트를 지난 두달간 했음에도 렌더링을 이제서야 깨닫다니.. 스냅샷에 대한 이해가 전혀 없었다. state를 스냅샷이라고 설명이 많았음에도 그 스냅샷을 그냥 그 순간을 포착하는 캡처 기능처럼 순간의 데이터를 저장하고 있다라는 개념만 갖고 있었다라나.. 이 state에 의한 렌더링의 이해가 필요하다는 생각에 희열을 느꼈다 진짜로. 그럼에도 useEffect과 의존성 배열은 확실히 이해가 되어있다는 걸 느껴서 다행이다고 생각이 들더라. 내가 작성한 코드 const [workingArray, setWorkingArray] = useState([]) const [doArray, setDoArray] = useState([]) const [doneArray, setDo..