[week02] 현 2주차 미션_1

[sisihhy]

useContext를 이용하여 전역으로 상태를 관리하며 TodoList를 좀 더 효율적으로 관리 하는 방법을 알게 되어 좋았습니다.

[limtjdghks]

useContext는 부모 컴포넌트와 하위 컴포넌트간의 props 전달을 줄이기 위해 state를 전역으로 관리 할 수 있도록 사용하는 훅입니다 Todo.tsx 컴포넌트에서 deleteTodo, completeTodo를 호출한 뒤 TodoList.tsx로 전달하면 useContext를 사용하는 것 보다 TodoList.tsx 컴포넌트에서 각각 state와 함수를 호출하여 사용하는 것이 적절한 것 같습니다

const TodoList = ( {title,
    todos,
    buttonLabel,
    buttonColor}: TodoListProps ) => {
    const { deleteTodo, completeTodo } = useTodo();

    return (
        <div className="render-container__section">
            <h2 className="render-container__title">{title}</h2>
            <ul id="todo-list" className="render-container__list">
                {todos?.map(
                    (todo): React.ReactElement => (
                        <li key={todo.id} className="render-container__item">
                            <span className="render-container__item-text">
                                {todo.text}
                            </span>
                            <button
                                onClick={() => onClick(todo)}
                                style={{ backgroundColor: buttonColor }}
                                className="render-container__item-button"
                            >
                                {buttonLabel}
                            </button>
                        </li>
                    )
                )}
            </ul>
        </div>
    );
};

TodoList.tsx에서 todos,doneTodos state도 props 전달 없이 useContext를 사용할 수 있는 로직을 구성해보는 것도 추천드립니다