개발조각

최종 코드 채팅 스크롤 및 채팅 화면의 특징 스크롤 맨 아래가 최신 채팅 내용, 스크롤을 위로 올릴수록 예전 채팅 내용이 나온다. 스크롤을 최상단으로 올리면 더 이전의 채팅 내용이 나온다. 이전데이터가 나오면 스크롤 위치가 마지막으로 본 채팅 내용 위치로 간다. 채팅화면 입장시 스크롤이 맨 아래에 있어야 된다. 채팅 중간마다 날짜가 바뀌면 년/월/일 표시해준다. 일반적으로 백엔드에게서 채팅 내용들을 API로 받으면 아래와 같은 모양으로 구성이 되어 있습니다. { "page": 1, "content": [ { "question": "안녕??", "answer": "반가워~", "created_at": "2023-13-30T06:00:00" }, ... ] } get을 사용하여 page를 query stri..

리액트에서는 내가 원하는 인터페이스, 기능을 담은 나만의 커스텀훅을 직접 만들 수 있다. 커스텀 훅을 만들어두면 다른 리액트 훅처럼 필요할 때마다 간단히 불러와서 사용할 수 있다. Custom hook이란? Custom hook이란 우리의 입맛데로 직접 커스텀해서 만든 리액트 훅이다. 커스텀 훅을 만드는 방법은 간단한다. // Custom Hook function useEat(){ // 원하는 이름 //...원하는 기능을 함수안에 구현 } 컴포넌트 내부에 있는 로직을 커스텀훅이라는 함수 속으로 빼주는 것이다. 물론 매개변수, 리턴값도 마음대로 정할 수 있다. 커스텀 훅이 매력적인 이유는 커스텀훅 내부 안에 리액트 훅들을 자유롭게 사용 가능하면 커스텀 훅을 사용하는 컴포넌트마다 커스텀 훅이 가지고 있는 s..

컴포넌트는 왜 계속 렌더링이 되는 거지? 불필요한 렌더링을 막을 방법이 없을까? 리액트를 개발하다보면 계속해서 렌더링 할 필요 없는 컴포넌트가 계속 반복해서 렌더링이 되는데 해당 컴포넌트가 렌더링 될때마다 무거운 로직을 수행한다면 컴포넌트의 성능은 안 좋아진다. React.memo 개념 설명 일반적으로 리액트는 성능이 굉장히 좋기 때문에 대부분일 경우에는 컴포넌트 렌더링 횟수에 대해서 크게 고민할 필요가 없다. 하지만 렌더링이 지나치게 많이 발생하거나 렌더링 될 때마다 무거운 로직을 처리해서 성능의 부담을 준다면 불필요한 렌더링은 최대한 막아야 된다. // 부모 컴포넌트 const School = (props) => { return ( ); } // 자식 컴포넌트 const Student = ({name..

컴포넌트의 state를 생성하고 관리하기 위해서는 useState훅을 사용해 왔는데 리액트에서 state관리를 위한 또 다른 훅이 있다. 그건 바로 useReducer라는 훅이다. useReducer 개념 설명 useReducer는 useState처럼 state를 생성하고 관리할 수 있게 해주는 도구이다. useReducer는 언제 사용하는 걸까? 여러 개 하위값을 포함하고 있는 복잡한 state를 다뤄야 될 때 useState대신에 useReducer를 사용하면 코드를 깔끔하게 쓸 수 있고, 유지보수도 쉬워진다. // State { teacher: 'James', students: ['Kim', 'Ann', 'John'], count: 3, locations: [ {country: 'Korea', na..

useCallback 개념설명 useCallback도 메모이제이션기법으로 컴포넌트를 최적화한다. 메모이제이션이란? 자주 사용하는 값을 받기 위한 반복적으로 계산을 해야 된다면 계산한 값을 캐싱해 두고 필요할 때마다 반복적으로 계산하는 것이 아니라 메모리에 꺼내서 재사용하는 최적화 기법이다. useMemo 간단 설명 useMemo는 자주 쓰이는 값을 메모이제이션 즉 캐싱을 한다. 그 값이 필요할 때마다 다시 계산하는 것이 아니라 useMemo를 통해 캐싱해 둔 값을 메모리에서 꺼내와서 사용한다. useMemo(()=>{ return value; // value를 메모이제이션을 해준다. }, [item]) useMemo 인자로 콜백함수를 넣어주면 이 함수가 리턴하는 값을 메모이제이션을 해주는 것이다. u..

useState, useEffet 기본적인 리액트 훅을 사용에 익숙해졌다면 컴포넌트 성능을 최적화(Optimmization)하는 방법에 대해 알아야 된다. 최적화를 위해 사용되는 대표적인 훅으로 useMemo와 useCallback이 있다. useMemo 개념 설명 useMemo에서 Memo라는 말은 Memoization(메모이제이션)을 의미한다. 메모이제이션이란 동일한 값을 리턴하는 함수를 반복적으로 호출해야 된다면 맨 처음 값을 계산할 때 해당값을 메모리에 저장해서 필요할 때마다 또다시 계산하지 않고 메모리에 꺼내서 재사용하는 기법 간단히 말하자면 자주 필요한 값을 맨처음 계산할 때 캐싱해 둬서 그 값이 필요할 때마다 다시 계산하는 것이 아니라 캐시 해서 사용해 주는 것이다. 꼭 기억해야 되는 점 f..

useContext 개념설명 리액트로 만들어진 App은 여러 개의 컴포넌트로 이루어져 있다. 최상위 App 컴포넌트를 시작해서 트리형태로 쭉쭉 뻗어 나고 있으며 리액트에서 일반적인 데이터 흐름은 위에서 아래로 즉 부모컴포넌트에서 자식컴포넌트 props를 통해 전달된다. App Header props를 통해 데이터를 전달할때 부모컴포넌트가 자식 컴포넌트 태그에 넣어주어 단계별로 전달해 주어야 된다. 엄청 큰 리액트 App이 있다고 가정하면 (컴포넌트도 많고 트리도 깊다) App내부에 수많은 컴포넌트들이 공통적으로 필요한 전역적인 데이터가 있을 수 있다. (예를들면 현재 로그인된 사용자 정보, 테마, 언어등) Global Data: User, Theme, Language 이런 전역적인 데이터를 props로..

useRef로 DOM 접근 (개념설명) const ref = useRef(value); ref = {current: value} useRef를 부르면 오브젝트를 부르게 되고 이 오브젝트를 접근하고자 하는 태그에 ref속성으로 넣어주면 해당 요소에 접근할 수 있다. Ref를 사용하면 DOM요소에 쉽게 접근할 수 있고, Document.querySelector()와 유사하다. 예제 1 마운트 될 때 인풋에 자동으로 포커스 넣기 import { useState, useEffect, useRef } from "react"; function App() { return ( ); } const UseRefDOM1 = () => { const inputRef = useRef(); useEffect(() => { con..