[React 톺아보기] 4. 컴포넌트(3) 컴포넌트 순수성

이번 포스팅에서는 목록 렌더링과 컴포넌트의 순수성에 대해 다루어 보겠습니다. 이번 포스팅도 단순히 컴포넌트의 순수성에 대한 내용을 다루지는 않습니다. 컴포넌트 포스팅에서 다루었던 내용을 바탕으로 컴포넌트 순수성에 대해서 다루어 보겠습니다.

컴포넌트의 단일 책임!

컴포넌트 안에서 변수, 배열들의 변화 x

불변성 유지!

이후에 배울 이벤트 핸들러, 상태 관리에 대한 개념 언급!

 

 

  let todolists = [{
    id: 1, //JSX에서 key로 사용됨.
    name: "예외 처리하기",
    done: true
    }, {
    id: 2,
    name: "계층 구조 설계하기",
    done: true
    }, {
    id: 3,
    name: "UI 구현하기",
    done: true
    }, {
    id:4,
    name: "사용자와 상호 작용을 변수 설정",
    done: false
    }
  ]

 

function TodoListBox() {
    return (
      <div className='todoListBox'>
      {todolists.map(todo => (
        <Task key={todo.id}
        id={todo.id}
        name={todo.name}
        done={todo.done}
        color="green"
        ></Task>
        ))}
    </div>
)}

전체 코드

import React from 'react';
import './todoMain.css'

function Task({ id, name, done = true, color }) {
  return (
    done ? <div><del style={{ color: color }}>{id}. {name}</del></div> :
    <div style={{ color: color }}>{id}. {name}</div>
    );
  }
  
  let todolists = [{
    id: 1, //JSX에서 key로 사용됨.
    name: "예외 처리하기",
    done: true
    }, {
    id: 2,
    name: "계층 구조 설계하기",
    done: true
    }, {
    id: 3,
    name: "UI 구현하기",
    done: true
    }, {
    id:4,
    name: "사용자와 상호 작용을 변수 설정",
    done: false
    }
  ]
  
  function TodoListBox() {
    return (
      <div className='todoListBox'>
      {todolists.map(todo => (
        <Task key={todo.id}
        id={todo.id}
        name={todo.name}
        done={todo.done}
        color="green"
        ></Task>
        ))}
    </div>
)}


function TodoMain() {
    return (
      <div className='todoMainBox'>
        <TodoListBox />
      </div>
    )
  }

  export default TodoMain;