소개

반나절 지출하여 해결할 수있는 구현
오브젝트나 배열의 특징 등을 어쩐지 밖에 이해하지 않았기 때문에 끼웠다
메모로 남기기

하고 싶었던 일

상위 구성 요소로 관리하는 State

app.jsx

const [post,setPost] = useState([
    {title:'Topic1', text:'Hello world'},
    {title:'Topic2', text:'Hello world'},
    {title:'Topic3', text:'Hello world'},
    {title:'Topic4', text:'Hello world'},
    {title:'Topic5', text:'Hello world'},
  ])

기사의 타이틀과 본문이라고 가정한 이 state를 List 형식으로 오브젝트의 수만큼 아이 컴퍼넌트로 표시하고 싶다
즉 ul의 바로 아래에 map 메소드로 객체의 수만큼 li 요소를 만들고,title.text각각의 값을 한층 더 아래의 컴퍼넌트에 props로서 건네준다

구현

List.jsx

const List = () => {
  const state = useContext(PostContext);

  return (
    <div>
      <ListUI>
        {state.map((s) => {
          return(
          <ListItem key={s.title}>
            <Items title={s.title} text={s.text}/>
          </ListItem>
          )
        })}
      </ListUI>
    </div>
  );
};

hooks의 usuContext에서 부모 구성 요소의 상태를 받고 map 메서드에서 객체 수만큼 돌립니다.
material UI의 ListItem에서 li 요소를 만들고 제목과 텍스트 값을 각각 아이의 구성 요소에 props로 전달했습니다.

Items.jsx

const Items = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.text}</p>
    </div>
  );
};

watasareta
props를 이렇게 구현하면



할 수 있었다

넘어진 점

솔직히 객체나 배열에 대한 지식이 달고, 또 map을 사용해야 하는지 forEach를 사용해야 하는지 판단도 자신이 없어 어떻게든 구현하려고 우왕좌왕해 버렸다.
또한 콘솔에 반영되지만 화면에는 그려지지 않는 현상에 어려움을 겪었다.
map 메소드 뒤에 return을 쓰는 것을 잊어 버린 것이 원인이었습니다.
map의 결과를 ListItem>Items와 같이 여러 계층으로 표시하고 싶다면 return은 필수

결론

카탈시스