[React] push, concat, ...(스프레드 연산자) 차이

안녕하세요! 

제가 CEOS(동아리)에서 간단한 프로젝트를 하면서 느꼈던 것들 그리고

처음 접했던 문법들 위주로 설명하겠습니다.

 

메세지 define, update

 const MESSAGE_LIST = [
        { user: true, content: '안녕하세요 12기 프론트엔드 개발자분들' },
        { user: true, content: '저희의 대화를 마음껏 조작해보세요 💌' },
        { user: true, content: '상단에 프로필을 눌러서 발신자 변경하면 됩니당~' },
        { user: false, content: '안녕 은아' },
        { user: false, content: '뭐해 ?' },
        { user: true, content: '시원아 넌 최고의 팀장이야' },
        { user: false, content: '나도 아니까  ' },
        { user: false, content: '그만 말해줘도 돼' },
        { user: true, content: 'ㅠㅠ' },
    ];

    const [messageList, setMessageList] = useState(MESSAGE_LIST);

 

메신저의 MESSAGE_LIST를 업데이트 하기 위해서는 const [state, setState] =  userState('initial')

를 통하여 state를 정의 해줍니다.

MESSAGE_LIST는 초기 값(initial)으로  생각하면 편합니다.

 

메세지를 업데이트 할 때 자식 컴포넌트에서 전달 받은 값을 어떻게 부모로 전달하느냐에서

많은 시간을 썼습니다.

 

messageList update 로직

const handleMessageList = (newMessage) => {
    setMessageList(messageList.concat(newMessage));
};

 

ChattingScreen.js 의 태그부분

<Screen>
	<Header userImage={userStatus ? EUNKO : COOL} toggleUser={toggleUser} userName={userStatus ? '고은' : '정쿨'} />
        {messageList.map((message, k) => {
            return <ChattingMessage key={k} messageSender={message.user} messageContent={message.content} userList={userList} />;
        })}
        <MessageSender status={userStatus} handleMessageList={handleMessageList}/>
        <BottomSpace />
</Screen>

 

MessageSender 부분에서 위의 handleMessageList를 통해 함수를

<MessageSender> 태그의 props로 전달 가능합니다.

 

물론 함수 뿐만아니라 status={userStatus}처럼 변수또한 props로 전달이 가능합니다.

status는 MessageSender.js에서 받는 props변수 명이되고, {userStatus} 자바스크립트 문법 안에 정의된

이 변수는 현재 ChattingScreen.js안의 state라 보시면 됩니다.

 

<MesageSender> 에서 handleMessageList를 새 메세지를 매개변수로 넣어 동작 할 경우

ChattingScreen.js에 있는 hadleMessageList 함수가 동작하면서 새 메세지를 concat를 통하여 넣어줍니다.

 

 

위의 handleMessageList에서 List에 push, concat, ... 다 되는것이 아닌가??

const handleMessageList = (newMessage) => {
    setMessageList(messageList.push(newMessage));
};

const handleMessageList = (newMessage) => {
    setMessageList([...mesageList, newMessage]);
};

push,concat, ... 을 console.log로 띄워보면서 return 값을 확인 하겠습니다.

 

먼저 첫번째 경우 push를 보겠습니다.

push함수를 써서 setMessageList의 매개변수 안에주게 되면 잘 작동하지 않습니다!

그 이유는 다음 예를 보며 확인 하겠습니다.

 

push(5)를 해주게되면 밑의 반환값을 볼 때 4가 나옵니다.

이 4는 과연 어떤 값일까?? 알아본 결과 push함수의 return 값이 배열의 length가 된다는것을 확인할 수 있습니다.

이런식으로 값을 계속해서 대입하지만 반환값은 length가되고 array를 찍어봤을 때 값은 제대로 들어 있는것을 알 수

있습니다.

 

...을 활용한 스프레드 문법의 경우!

이런 식으로 배열이 return 되는 것을 볼 수 있습니다.

 

마지막으로 concat의 경우

역시나 합치게되면 배열값을 return 하는 것을 볼 수 있습니다.

 

따라서 push의 경우 기존 배열에 push되지만 return 값은 배열의length가 되고

나머지 concat, ...에서는 새로 배열을 만들어 return 하는 것을 볼 수 있습니다.