React 컴포넌트에 객체 할당

React는 기능별로 나눠서 개발하기 좋게 구성되어진 라이브러리다.

각 기능을 컴포넌트 단위로 분리해서 그 컴포넌트를 조합해서 완성시키는 방법이다.

그렇다보니 기능별로 개발할 수 있어서 유지보수의 장점이 있다.

React를 공부하면서 기능이 어떻게 쓰이고 적용되는지에 대해서

깜깜한 동굴에서 더듬더듬 찾아가듯이 조금씩 이해하고 있다.

오늘 정말 어려웠던 것은 함수 컴포넌트별로 파일이 나눠져 있을때

그 함수에 데이터를 전달하는 것이었다.

데이터도 다른 파일로 별도 관리가 되기 때문에

그 데이터를 가져와서 함수에 넣는다는것이 생각보다 어려웠다.

import React from 'react';
import { messageData } from '../messageData';
import './Message.css';
import Message from '../Message';
import Footer from '../Footer';

const Messages = () => {
  return (
    <React.Fragment>
      <div className="messagesForm__count" role="status">
         <span className="messagesForm__count__text">
            {'total: ' + messageData.length}
         </span>
      </div>
      <ul className="messages"> 
    //
        이 부분을 채워서 메세지 넣기
        
        //
      </ul>
       <Footer />
    </React.Fragment>
  );
};

export default Messages;

이 부분을 채워서 메세지를 넣어야 하는 것이다.

messageData 파일에 메세지 정보가 들어있는데 그것을 적용시키는 방법이

생각나지 않았다.

messageData 데이터에 있는 만큼 메세지 데이터를 보여줘야 하는데

Messages 컴포넌트는 Message 컴포넌트의 메세지 양식 메소드를 이용해

messageData를 보여주는 기능을 한다.

이때 모든 messageData를 보여주려면 모든 데이터를 한번씩 보여줘야 하기 때문에

반복문을 사용해야 하는데 모든 데이터를 조회하는 메소드를 사용하는 것이 좋다.

map이 모든 데이터를 조회하여 다른 값으로 바꾸는 메소드로 적합하다.

빈 부분을 적어보면

 {messageData.map((message) => {
   return <Message key={message.id} message={message} /> 
 })}
     

이렇게 된다. 이부분이 이해되지 않아서 한참을 보고 또 봤다.

이것은 문법이 그러하니 그렇게 이해하는 수 밖에 없었다.

<Message key={message.id} message={message} />

이 부분이 위에서 map 메소드로 모든 데이터를 하나하나 꺼내 조회하면서 return 값으로

변해진 부분이다. 리턴하는 곳에 변하고자 하는 값을 넣으면 map 메소드가 배열의 요소 값을

변하게 한다.

중요한 부분은 저 컴포넌트의 문법이었다.

위의 Messages 컴포넌트 안에 보면 Footer 컴포넌트가 자식 컴포넌트로 되어있는 것을

볼 수 있는데 그 Footer 컴포넌트는 안에 특별한 함수가 적용된 컴포넌트가 아니기 때문에

컴포넌트를

<Footer />	

이런식으로 사용하면 되는데 Parameter가 들어있는 함수가 들어있는 컴포넌트에

다른 데이터를 할당한 결과를 나오게 하는 부분은 문법을 사용해야 했다.

<Message // 메서지 컴포넌트 안에 
         key={message.id} // 매개변수의 id 속성을 판단해서 맞는 것을
                          message={message} //할당데이터를 함수적용시킨다

라는 의미로 이해했다.

key를 id를 보는 것은 그 값이 변한 데이터인지 랜더링 할 데이터인지 판별하기 위해

입력하는 것이라고 알고 있다.

그래서 그 값을 보고 뒤에 message 매개변수에 할당되는 messageData의 값을

Message 컴포넌트 안에 있는 함수를 적용시킨 결과를 보여지게 되는 것이다.

내일은 몇시간의 삽질을 하게 될까