채팅-React.memo()

이 글은 Tistory에서 이전된 포스팅입니다. 원본은 여기에서 확인할 수 있습니다.

const Messeges = () => {
        <>
            <S.Messages>
                {
                    reMsgArr.map((v: responseMsgDto[], idx) => {
                        return <Message key={idx} responseMsgArr={v} />
                    })
                }
                <div ref={chatRef}></div>
            </S.Messages>
            <S.InputDiv>
                <S.TextArea
                    value={inputMsg}
                    onChange={(e: any) => setInputMsg(e.target.value)}
                    onKeyDown={keyDownHandler}
                />
                <S.Send>
                    <S.SendBtn
                        onClick={sendHandler}>
                        Send
                    </S.SendBtn>
                </S.Send>
            </S.InputDiv>
        </>
    }

위와 같은 구성에서 textArea 변경할 때 setInputMsg 돌면서 Messages 재실행 그리고 Message 도 재실행된다.

Message 컴포넌트는 inputMsg 값과는 무관한 컴포넌트이고 재실행 될 이유가 없으므로

export default memo(Messege);

다음과 같이 React.memo를 붙여 export 해준다.

textArea 변경해도 Message는 재실행되지 않는다.