[리액트] state 값 수정

원하는 결과물

state에 저장된 메시지의 항목 중 원하는 항목의 내용을 변경하고자 한다.

 

Prev 사용

prev는 state의 이전 값들을 뜻한다.

setMsgC((prev) =>
     [...prev].map((_msg) => (_msg.id === newMsg.id ? { ..._msg, content: newMsg.content } : _msg))
    );

다음과 같이 prev와 삼항연산자를 이용한다.

 

(prev) =>
     [...prev].map((_msg)

MsgC내에 있는 값들을 가져와 map을 이용하여 각 항을 이용할 준비를 마친다.

 

(_msg.id === newMsg.id ? { ..._msg, content: newMsg.content} : _msg))

그 후 각 항의 id와 새로 들어온 메세지의 id가 같은지 비교한다.

메시지가 같을 경우 내용을 변환한 다음 저장하고, 그게 아니라면 전 메시지를 그대로 저장힌다.