[React.js] React에서 배열 사용하기

1. 리스트 렌더링

• 컴포넌트에서 배열을 props로 받음
• 배열의 map 메소드를 사용하여 데이터들을 하나씩 렌더링

 

※ map 메소드 사용시 주의사항

1. map 메소드를 사용해 리액트 컴포넌트 리스트를 렌더링 할 때에는 반드시 리스트의 각 컴포넌트는 고유한 key prop을 제공받아야 함. 그 이유는 리액트가 리렌더 과정에서 리스트 내부의 컴포넌트를 식별하기 위함

 

2. map의 콜백함수로 사용되는 함수를 화살표 함수로 사용할 때 2줄 이상의 코드가 필요하다면 화살표 함수의 문법대로 중괄호를 사용해야 하며 return 키워드로 별도의 반환을 해주어야 한다. 만약 그렇지 않고 값을 반환해야 할 경우 소괄호 및 중괄호는 필요하지 않다. 다만 화살표 함수에서 객체를 반환하거나 JSX 요소를 반환해야할 경우 소괄호로 묶어주어야 한다.

<div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
      <div>
        {diaryList.map((it) =>
          <div>
            <DiaryItem key={it.id} {...it} />
          </div>)}
      </div>
    </div>

 

2. 리스트 데이터 추가하기

현재 컴포넌트 구조는 다음과 같다

DiaryEditor 컴포넌트에서 일기를 작성하고 저장하면 DiaryList에 새로운 일기를 추가하여 보여주어야 한다.

하지만 리액트에서는 같은 레벨의 컴포넌트로 데이터를 전달할 수 없고 오직 부모 컴포넌트에서 자식 컴포넌트로만 props를 전달할 수 있다. 이를 단방향 데이터 흐름이라고 한다. 따라서 다음과 같이 처리해주어야 한다.

 

DiaryEditor와 DiaryList의 공통 부모 컴포넌트인 App이 데이터에 대한 state를 가지고 data는 DiaryList에 prop으로 전달하고 setData 함수는 DiaryEditor에 prop으로 전달하게 된다. 이로써 새로운 일기가 추가된 경우 setData 함수로 data를 바꾸고 이를 다시 DiaryList에서 렌더링 하는 방식으로 처리된다.

function App() {

  const [data, setData] = useState([]);
  const dataId = useRef(0);

  const onCreate = (author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id: dataId.current
    };
    dataId.current += 1;
    setData([newItem, ...data]);
  };

  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate} />
      <DiaryList diaryList={data} />
    </div>
  );
};

※ 컴포넌트 안에서 변수를 사용하는 경우 useRef()를 사용해야 하는 이유

컴포넌트도 기본적으로 함수이기 때문에 리렌더가 일어난다는 것은 해당 함수가 재실행되는 것과 같다.

따라서 컴포넌트 함수 안에 let이나 var 변수를 선언하고 초기화하면 리렌더가 발생할 때 해당 변수가 다시 초기화되어 상태를 유지할 수 없다. 만약 전역변수로 사용하면 상태를 유지할 수 있겠지만 이는 모든 컴포넌트와 공유하는 변수가 되어버려 컴포넌트 사용의 의미가 사라지고 좋지 않은 코드가 된다.

---