WebProgramming/React

[React] List Rendering

2022. 7. 3. 23:07
목차
  1. 1. App Component
  2. 2. DairyList Component
  3. 3. DairyItem

오늘 배워 볼 것은 React에서 List를 Rendering하는 것입니다 !

오늘 만들 구조는

1. App.js에서 DairyList Component에 props로 dummyList를 넘겨줍니다.

2. dummyList를 props로 전달 받은 DairyList에서 DairyItem Component에 props로 넘겨받은 props를 그대로 넘겨줍니다.

3. dummyList를 props로 전달받은 DairyItem에서 리스트를 활용해 화면에 출력합니다.

 

1. App Component

1. 리스트를 props로 넘겨 줄 때, <DairyList dairyList={dummyList} /> 이런 식으로 변수를 넘겨주듯이 넘겨줍니다.

이 prop는 변경할 수 없습니다.

import "./App.scss";
import DairyList from "./DairyList";

const dummyList = [
  {
    id: 1,
    author: "박규성",
    content: "하이 1",
    emotion: 5,
    created_date: new Date().getTime(),
    // 현재 시간을 숫자(millisecond)로 변환하여 저장
    // new ; 생성자
  ...
];

function App() {
  return (
    <div className="App">
      <DairyList dairyList={dummyList} />
    </div>
  );
}

export default App;

 

2. DairyList Component

1. DairyItem Component에게 넘겨받은 App으로부터 props를 넘겨주어야 합니다.

2. 한 개씩 넘겨주기 위해 map을 사용하였고, dairyList의 요소들을 it으로 받았습니다.

<div> {dairyList.map((it) => (<DairyItem key={it.id} {...it} />))} </div>

3. App으로부터 전달받은 props인 dailyList가 undefined인 상황을 고려해, 기본값을 []로 설정해두었습니다.

DairyItem.defaultProps={diaryLst:[ ]}

import React from "react";
import DairyItem from "./DairyItem";

const DairyList = ({ dairyList }) => {
  return (
    <div className="DairyList">
      <h2>일기 리스트</h2>
      <h4>{dairyList.length}개의 일기가 있습니다.</h4>
      <div>
        {dairyList.map((it) => (
          <DairyItem key={it.id} {...it} />
        ))}
      </div>
    </div>
  );
};

// undifined로 전달이 되면 오류가 뜨기에 기본값 설정해둠
DairyItem.defaultProps = {
  dairyList: [],
};

export default DairyList;

 

3. DairyItem

1. DariyList로부터 전달받은 props들(...it) ; author, content, create_date,emotion,id를 인수로 전달하였습니다.

2. 전달받은 props들을 { }중괄호로 감싸 표현하였습니다.

import React from "react";

const DairyItem = ({ author, content, created_date, emotion, id }) => {
  return (
    <div className="DairyItem">
      <div className="info">
        <span>
          작성자 : {author} | 감정 점수 : {emotion}{" "}
        </span>
        <br />
        <span className="date">{new Date(created_date).toLocaleString()}</span>
      </div>
      <div className="content">{content}</div>
    </div>
  );
};

export default DairyItem;

만든 일기리스트는 아래와 같습니다.

 

 

 

저작자표시 (새창열림)

'WebProgramming > React' 카테고리의 다른 글

[React] 라우팅(react-router-dom)(useParams, Query)  (0) 2022.07.07
[React] Hook  (0) 2022.07.07
[React] 부모 Component -> 자식 Component에게 함수/리스 전달하기  (0) 2022.07.04
[React] 자식 Component -> 부모 Component로 데이터 전달하기  (0) 2022.07.04
[React] useRef를 이용한 DOM조작  (0) 2022.07.03
[React] React 프로젝트 - DiaryEditor Component  (0) 2022.07.01
[React] Props  (0) 2022.07.01
[React] useState를 이요한 상태 관리  (0) 2022.07.01
  1. 1. App Component
  2. 2. DairyList Component
  3. 3. DairyItem
'WebProgramming/React' 카테고리의 다른 글
  • [React] 부모 Component -> 자식 Component에게 함수/리스 전달하기
  • [React] 자식 Component -> 부모 Component로 데이터 전달하기
  • [React] useRef를 이용한 DOM조작
  • [React] React 프로젝트 - DiaryEditor Component
피터s
피터s
1년차 프론트엔드 개발자입니다 😣 아직 열심히 배우는 중이에요! 리액트를 하고있어요 :) - gueit214@naver.com - https://github.com/gueit214
피터s
피터의 성장기록
피터s
전체
오늘
어제
  • 분류 전체보기 (200)
    • 코딩 테스트 (25)
      • 프로그래머스 (16)
      • LeetCode (8)
      • 백준 (1)
    • 개발 독서 일지 (1)
    • 기업 분석 (4)
    • 개발 일지 (19)
      • 최신기술 도전기 (1)
      • 에러 처리 (5)
      • 개발 일지 (12)
    • 개발 일상 (36)
      • 개발 회고 (22)
      • 개발 이야기 (12)
      • 개발 서적 (1)
    • 취업 관련 지식 (11)
    • 알고리즘 (17)
    • WebProgramming (84)
      • WebProgramming (8)
      • HTML (5)
      • CSS (8)
      • JS (21)
      • React (40)

블로그 메뉴

  • About
  • 2022년 개발 성장기
  • 앞으로의 계획
  • github
  • 일상 blog

공지사항

인기 글

태그

  • Union-find
  • 개발 회고
  • 반복문
  • 개발 is life
  • lv3
  • 함수
  • 스터디 후기
  • 해커톤
  • 1일 1커밋 후기
  • 누적합
  • dfs
  • 카카오 채용연계형 인턴십
  • 개발 일상
  • KAKAO BLIND
  • BFS
  • 구름톤
  • 구름
  • 1년 회고
  • Kakao Tech Internship
  • 카카오
  • Retry
  • LV2

최근 댓글

최근 글

hELLO · Designed By 정상우.
피터s
[React] List Rendering
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.