빵 입니다.

❓컴포넌트 함수가 재실행되면 useState()도 계속 재실행되는 거 아닌가? ❓그럼 매번 상태를 초기화하고 다시 렌더링 하는 건가? ❗️NO!!! React는 처음 useState가 호출될 때 해당 상태 변수를 생성하고 기본값을 사용하여 초기화를 딱 한 번 한다. (해당 변수와 연결된 값이 메모리에 저장된다.) 이때의 초기화는 컴포넌트가 처음 렌더링 될 때만 발생하며, 그 이후로는 해당 상태 변수가 이미 생성되었다면 초기화를 하지 않는다. 이후 렌더링에서는 이전에 생성된 상태 변수를 재사용하고, 값이 변경되어도 새로운 변수를 생성하는 것이 아니라 이전 변수를 업데이트하게 된다. 상태 초기화는 컴포넌트가 DOM에서 완전히 삭제되지 않는 한 (unmount 되지 않는 한) 계속 유지된다. 컴포넌트가 유지되..

🔥함수형 컴포넌트 기반으로 정리를 했습니다! React.memo()는 함수형 컴포넌트를 메모이제이션하여 컴포넌트의 props가 변경되지 않으면 리렌더링을 하지 않도록 만들 수 있었다. ❓그렇다면 컴포넌트만큼 많이 생성되는 게 함수인데, 함수를 메모이제이션하는 방법은 없을까? ❗️있다! useCallback() 훅을 사용하여 함수를 메모이제이션 할 수 있다. 컴포넌트가 실행되는 동안 함수를 메모이제이션하고, 해당 함수를 불필요하게 재생성하지 않도록 도와준다. 함수가 불필요하게 재생성되지 않기 때문에 불필요한 렌더링을 방지하고 메모리 사용을 최적화할 수 있다. 더보기 🔥메모이제이션 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 ..

🔥함수형 컴포넌트 기반으로 정리를 했습니다! ❓불필요한 렌더링 발생 부모 컴포넌트의 상태나 프롭스가 변경되면 해당 부모 컴포넌트에 속한 자식 컴포넌트도 재평가 된다. > 자식 컴포넌트에게 내려주는 props의 값이 변경되지 않아도, 부모 컴포넌트의 상태가 변경되었기 때문에 자식 컴포넌트도 리렌더링 된다. >> 불필요한 리렌더링은 컴포넌트 계층 구조가 복잡하고 데이터가 자주 변경될 때 발생할 수 있다. 불필요한 재평가를 방지해야 한다! ❗️React.memo()를 사용하면 된다! 컴포넌트 export 할 때, React.memo()를 사용해서 컴포넌트를 감싸서 내보낸다. 함수형 컴포넌트를 메모이제이션하여 이전에 전달된 props가 변경되지 않으면, 이전 결과를 재사용하기 때문이다. 더보기 🔥메모이제이션 컴..

캐시를 공부했다. 아니 안했다. 단순히 메모리 저장소, 있으면 좋은 것~ 이라고 생각했는데 공부할 꼭지들이 생각보다 많다--;; 그래서 살을 마구마구 붙여서... 다시 정리해서 조만간 올려야겠다~~~

🔥함수형 컴포넌트 기반으로 정리를 했습니다! 하위 컴포넌트 안에 있는 요소에 직접 접근하고 싶은데 컴포넌트에 ref 속성을 추가해 조작하려 하면 null 값을 참조하려 한다는 오류가 뜬다. => 함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에서 ref 어트리뷰트를 사용할 수 없다. 그럼 ref를 통해 함수 컴포넌트를 직접 제어하려면 어떻게 해야하지? ❗️forwardRef()를 사용하면 된다. forwardRef()는 부모 컴포넌트에서 전달받은 ref를 자식 컴포넌트로 전달하는 역할을 한다. (부모 컴포넌트의 ref와 실제 사용할 자식 컴포넌트의 ref 연결) 자식 컴포넌트는 전달받은 ref를 HTML 요소의 속성으로 넘겨줌으로써 함수 컴포넌트 역시 ref를 통한 제어가 가능해진다. 🌀ref Re..

CQCQ 들리시나요. 크리스마스 아침에 일어나서 나홀로집에1을 보면서 육개장 칼국수를 먹었다. 이브 때 산 배를 바꾸러 갔다. 배가 신나게 얼어버려서 먹을 수 없었다. 이브 때 지나가다 멍뭉이가 있는 카페를 보았었는데 배를 바꾸고 집에 돌아가다가 홀린듯 들어갔다. 역시나 생각했던 대로 보드라워... 선생님 성함은 '서누피' 카페 이름은 '빛톤' 사람답게 옷도 입고 계시고 이름표도 있으셨다. (견상권을 지키기 위해 뒷모습만 작게~) 집에 돌아와서 나홀로집에2를 보면서 프렌치 토스트와 우유를 한잔 때렸다. 꿀 그리고 빈둥빈둥 거리면서 나홀로집에3를 보았다. 스칼렛 요한슨 똑같아... 마지막 식사로 엽떡을 시켰다. 매운데 안매워 아니 매워 자기 전엔 성탄 특선 영화로 틀어준 동감 2022년 버전을 보았다. 1..

📌 리액트 함수 리액트 컴포넌트를 생성하기 위해 사용되는 함수 이 함수는 JSX(JavaScript XML)를 반환하여 리액트 애플리케이션의 UI를 정의하고 렌더링하는 역할 리액트 함수는 주로 두 가지 형태 => 함수 컴포넌트, 클래스 컴포넌트 📌 리액트 컴포넌트 리액트 컴포넌트는 JSX를 반환한다. JSX는 React.createElement 호출로 변환되며, 이것이 리액트 컴포넌트의 템플릿이다. 함수 컴포넌트나 클래스 컴포넌트 내에서 JSX를 반환하면 해당 함수나 클래스는 리액트 컴포넌트로 간주된다. 📌 리액트 훅의 규칙 리액트 훅은 최상위 수준에서 호출되어야 한다. 함수 컴포넌트나 클래스 컴포넌트의 최상위 수준에서만 호출되어야 한다. 중첩 함수(useEffect 등), 블록 스코프(조건문, 루프 등..

리액트는 props를 관리하는데, props는 컴포넌트에 전달하는 데이터로 컴포넌트 구성을 하게 해주고 부모-자식 컴포넌트 간의 통신을 연결해 주는 역할을 해준다. 문제는 여러 개의 컴포넌트를 거쳐 데이터를 전달할 때 일어난다. state를 여러 컴포넌트를 통해 props로 전달하는 경우 App ➡️ Header ➡️ Navigation App에서 Login 정보를 Header에 props로 내려준다. Header에서 직접 사용하지 않고, Header 안에 있는 Navigation에 Login 정보를 props로 내려준다. Navigation에서 직접 사용한다. => Header는 그냥 데이터를 전달만 할 뿐 이렇게 단순하게 props를 내려줄 수 있다. 그러나 DOM 트리가 복잡할 경우 LoginFor..