리액트 todo 만들기

내용을 작성하고 추가, 순번, 완료처리 가능한 todo 만들기
결과물

1. 먼저 todo라고 적힌 header 부분, input 부분, 리스트 전체부분, 각각 리스트목록으로 총 4개의 부분으로 나눠 구현했다.

---

2. 헤더 부분

---

3. 인풋 부분

import React from 'react'
import { useState ,useEffect} from 'react';
import List from "./List";
const Input = () => {

    // input에 입력된 값
    const [inputvalue,setInputvalue]= useState("");
    // 배열에 담을 값
    const [todovalue,setTodovalue]= useState("");
   
    function ta(){
        // 버튼 누르면 인풋 값 초기화
        setInputvalue("");
      
        setTodovalue(prevValue =>[...prevValue,inputvalue]);
        
    }
    function tb(){
        console.log(todovalue);
        if(todovalue==""){
            return <List/>
        }
        else{
            // return todovalue.map((item,index)=><List itemm={item}/>)
            return <List itemm={todovalue}/>
        }
    }

    function inputOnchange(e){
        console.log(e.target.value);
        setInputvalue(e.target.value);
    }

    useEffect(()=>{
        console.log(todovalue);
    },[todovalue])

  return (
    <>
    <div className='inputContain'>

        <div className='inputMain'>

            <input type="text" className='taa' name='taa' value={inputvalue} onChange={inputOnchange}/>
            <button onClick={ta}>추가</button>

        </div>

    </div>

    {tb()}
    </>

  )
}

export default Input

1) input 태그에 onChange 와 inputOnchange(e)를 이용해 input에 적은 내용이 inputvalue에 담기도록 함.

2) ta()는 추가버튼 클릭시 input값을 비웠고

<span style='background-color: #fff5b1'>setTodovalue(prevValue =>[...prevValue,inputvalue]);</span>

를 이용해 이전 값들과 현재 작성한 내용을 배열에 담음.

3) 담은 배열을 tb()를 통해 todovalue 배열값이 없을 때는 리스트목록이 없는 리스트 전체툴만 보여지게 하고, todovalue 배열값이 있을 때는

return <List itemm={todovalue}/>

itemm 에 todovalue 배열값을 보내면서 리턴 해줌.
아직 익숙하지 않아 return을 자주 빼먹는데 까먹지말자 !

---

4.List 틀 부분

1) input.jsx 에서 보내준 itemm 값을 받아 값의 유무를 판단후에
값이 있으면 itemm의 배열을 map을 사용하여 Listvalue 컴포넌트로
itemm의 item 값을 data로 보내줌.

---

5.Listvalue 부분
이 부분을 잘해야 앞으로 리액트로 구현할 때 쉽게 할 수 있겠다고 생각했다.

1) 완료 버튼을 눌렀을 때 상태변환을 시켜주는 값이 하나 필요했고,
active 초기값을 false로 두어 버튼 클릭시 true 바뀌게끔 하였다.

리액트의 신세계를 알아버린 부분

2) 조건문을 통해서 active 값이 어떤거에 따라 className, 버튼안의 text 등등 여러부분에서 다르게 적용할 수 있다는것이다.
그래서 active가 true(버튼을 눌렀을 때)일 땐 todoValue2 이라는 className을 주어 취소선이 그려지게끔 하였다. 버튼 안의 text도 동일하다.

---