[ React ] TodoList 실습하기 ⑤

오늘은 TodoList를 만들어 볼 것이다. 

내가 할일을 작성하고 추가하면,

아래와 같이 체크박스로 나타나는 형태로 만들어주고 완료를 했을때 오른쪽과 같은 화면을 만들어보자 

 

📘 APP.js

1. components 폴더의 components/R05_todolist1.js를 사용
import TodoList1 from './components/R05_todolist1';

2. TodoList1으로 불러오기 
function App() {

  return (
  
    <>
    
      {/* R05_todoList1 */}
      <TodoList1 />
      
    </>
  );
}

export default App;

📘 R05_todolist1.js

const TodeList1 = () => {



    // 할일을 저장할 변수
    // -> 상태가 변하면 컴포넌트 (TodeList1)을 리랜더링
    const [todos, setTodos] = useState([
        { text: '프로젝트', completed: false },
        { text: '점심먹기', completed: false }

    ]);

    console.log(todos)

    // 할일 입력 컴포넌트 
    const InputTodo = () => {

        const [inputText, setInputText] = useState('');

        // 버튼 클릭 시 할일 추가 
        const addTodo = () => {
            const newTodo = { text: inputText, complete: false };

            // todos에 newTodo를 추가한 객체 배열
            const newTodos = [...todos, newTodo];


            // 새로운 객체배열 newTodos를 todos대입
            // -> 상태 변화 인식 -> 리렌더링 진행
            setTodos(newTodos); /* 내가 입력한거랑 기존에 있던 것 세팅 */
            setInputText('');   /* 내가 추가하기 눌렀을때 input태그 안에 있는 내용 지워주기 */

        }

        return (
            <div>
                <h4>할일 추가</h4>
                <input type='text' onChange={e => setInputText(e.target.value)} />
                <button onClick={addTodo}>추가하기</button>
            </div>
        )

    }

    // 체크박스 값 변경 시 
    const TodoChange = (index) => {

        const newTodos = [...todos]; // todos풀어서 새로운 배열 생성
        // 전개 연산자를 이용한 배열 깊은 복사(데이터 완전 복사)

        // boolean값 반대로 변경해서 대입
        newTodos[index].completed = !newTodos[index].completed;

        setTodos(newTodos);

    }



    return (
        <>
            <hr />
            <InputName />
            <hr />

            <h1>Todo List1</h1>

            {/* 입력 */}
            <InputTodo />

            {/* 할일 목록 */}
            {/* 배열.map((배열요소, 인덱스=>{return 값;})) 
                -> 기존 배열을 이용해서 새로운 배열을 만드는 함수
                -> 새로운 배열의 요소는 map에서 return되는 값으로 이루어짐
            */}
            <ul>       {/* todos안에 있는 값을 꺼낼 변수 */}
                {todos.map((todo, index) => {
                    return (

                        /* key 속성 : 배열(list) 출력 시 요소를 구분하는 key값 */
                        <li key={index}>
                            <input type='checkbox'
                                checked={todo.completed}
                                onChange={() => {TodoChange(index) }}
                            />
                            <span className={todo.completed? 'completed' : ''}>
                                {todo.text}
                            </span>
                        </li>

                    );
                })}
            </ul>
        </>
    );



}
// 외부에서 해당 파일 import 시 TodoList1 함수를 내보내는 것을 기본 값으로 지정 
export default TodeList1;

 

📝 해석순서 

➡ input요소에 작성한 내용을 저장하기 

 

1. 하단에 있는 InputTodo컴포넌트로 이동! 

2. InputTodo로 가서 return에 있는 내용 확인 

return에 있는 요소를 만들면 ! 아래와 같은 화면을 만들어준다! 

그렇다면 우리가 input태그에 내용을 작성을 하고 추가하기를 클릭 했을때 내용을 나오게 해야한다. 

 

 

 

① input요소에 onChange함수를 써서, 그 안에 작성된 내용을 리랜더링됨으로 새로운 함수를 만든다. 
     input요소에 내가 직접 입력하기 때문에 초기값은 ''으로 설정해준다. 

const [inputText, setInputText] = useState('');

② input요소에 작성을 해줬으면 추가를 해줘야하니 addTodo함수를 만들어 준다. 

    그전에 추가했을때 어떻게 출력이 될지 형태를 잡아줘야하니 할일을 저장할 변수를 하나 만들어준다.

   const [todos, setTodos] = useState([
        { text: '프로젝트', completed: false },
        { text: '점심먹기', completed: false }

    ]);

 할일을 저장할 변수를 만들어줬으면 새롭게 작성한 내용을 출력하도록 새로운 변수를 만들어준다.

  const newTodo = { text: inputText, complete: false };

이전에 만들어준 형태인todos와 방금 만들어준 변수를 새로운 변수에 담아 객체 배열을 만들어준다. 

todos에는 값이 배열형태로 값이 들어갔으니 전개함수를 이용해서 담아주고

입력한 값이랑 기존에 있던 값을 세팅해주고, 추가하기 눌렀을때 input태그 안에 있는 내용까지 지워주면된다. 

// todos에 newTodo를 추가한 객체 배열
const newTodos = [...todos, newTodo];

// 새로운 객체배열 newTodos를 todos대입
setTodos(newTodos); /* 내가 입력한거랑 기존에 있던 것 세팅 */
setInputText('');   /* 내가 추가하기 눌렀을때 input태그 안에 있는 내용 지워주기 */

여기까지하게 되면 값만 todos에 값이 저장한 상태니 이제 값을 출력해서 화면에 뿌려줘보자

---

➡ 화면에 출력 및 완료되면 체크되고 css를 이용해서 line-through을 해주자 

 

3. return에 가서 ul태그로 간다. 

이전에 todos에 값을 넣어놨다 그렇다면 todos안에 있는 값을 꺼내보자 ! 

값을 꺼낼때 새로운 개념인 배열.map을 이용해서 꺼낼건데 자세한 내용은 아래 console을 확인해보자 

 

🤔💬 map.배열 이 뭐야? 

배열.map((배열요소, 인덱스=>{return 값;})) 
        -> 기존 배열을 이용해서 새로운 배열을 만드는 함수
        -> 새로운 배열의 요소는 map에서 return되는 값으로 이루어짐

 

 

① input에 checked속성은 todo에 completed을 이용한건데, 체크박스 클릭할때 체크 및 css 속성을 사용해야하기 때문에 함수TodoChange을 만들어주고, 어떤 인덱스가 체크되었는지 확인을 해야하니 index를 가지고 간다. 

② TodoChange함수에 가져온 index를 넣어 값이 있는 todos안에 있는 값을 전개연산자로 꺼내서 newTodos에 담는다. 

    newTodos[index].completed가 같지 않다면 Todos에 값을 세팅해준다! 

    completed값이 true면 false라고 값을 담아줄거다 (왜냐? fasle면 체크 안되어 있고 true면 체크되어 있어야하니까)

 

③ 다시, ul태그로 가서, span에 삼항연산자를 쓴곳을 보면 completed가 true면 completed를 출력

completed는 css에 line-through을 출력해준다. 

<span className={todo.completed? 'completed' : ''}>{todo.text}</span>

  또한 todo.text로 text값을 출력해주면된다! 

 

---

 

내가 몰라서 정리를 해뒀는데, 진짜 리엑트 너무 어렵다....😂😥

개발자는 공부하는 직업이라고 하는데 진짜 배움은 끝도 없다.