처음 React에서 뼈대를 잡을 때에는 컴포넌트 분리부터 시작한다.
자식요소를 연결 (Layout <> Header 을 연결하여 App에다가, TodoListPage <> InputBox 를
연결 하여 App에다가 연결) 해줬다.
그리고 나서 뼈대를 잡아줄 Layout에다가 children을 사용하여
(children => 태그와 태그사이에 들어가는 값을 칠드런으로 접근 할 수있다.)
이와 같은 페이지를 구현하였다.
처음 React에서 CSS로 뼈대를 잡고 코딩하려고 생각하고 진행 하다보니 컴포넌트 하나로만...
코딩하고 있었는데 이렇게 처음 컴포넌트로 뼈대를 잡고 시작하는게 처음 React공부할때는
Props라던지 state를 사용하는데에 첫걸음을 시작하기에 강력추천!!!
그 다음 하드코딩으로 구현하려는 페이지에 모든 뼈대를 완성 시켜주었다.
제목과 내용의 인풋에다가 텍스트를 입력해도 콘솔창이 뜨도록 구현해봤습니다.
처음에는 콘솔을 먼저 띄우고 진행하는걸 습관을 드리기 위해 위와 같은 방식으로 진행 했습니다.
이때
위 TodoListPage는 부모 컴포넌트, InputBox는 자식 컴포넌트인데
state 및 함수를 가져오기 위해서
return 값 안에 하위 요소인 InputBox 태그안에 작명으로 값을 담고,
InputBox 컴포넌트에는 (props)를 담는다=> (매개객체)
이때 (props)이렇게 담게 되면 onChange={props.onChangeTitle}이렇게 써야하지만
(props)안에다가 state 및 함수를 담은 작명을 넣게 되면
위 코드와 같이 onChange={onChangeTitle} 이렇게 사용이 가능하다.
변수로 담아 객체로 뿌려준다***
바로 상위에 props 굳이 담아도 되지 않는 걸 정리했다.
TodoListPage컴포넌트에서 InputBox컴포넌트에만 쓰는걸 그대로 가져오고,
부모 컴포넌트에다가는 setTodoCard state를 만 만들었다.
이거는 배열로 만들어서 인풋에 입력한 내용을 카드로 추가하는 기능을 구현하기 위해 코딩하였다.
InputBox컴포넌트를 보면 props(매개객체)에다가는 setTodoCard만 넣어줘서 가지고 오게했고,
onClickAddButton 함수를 만들어 setTodoCard에다가 콜백함수로 todoCard를 props로 가지고 왔다.
이미 setTodoCar에 todoCard가 있기에 이렇게 props해도 가져와 진다.
그안에 배열에는 데이터타입을 공부하고 오면 알수있는 ...todoCard를 써서 배열을 풀어주고
1번째 인덱스로 객체를 담았다.
id값은 추후 삭제기능 등 구현하는데 사용하기위해 넣어줬다.
그리고 title: title 는 key와 value가 같기 때문에 title,이렇게 코딩하였고
하드코딩을 해둔
TodoListPage 컴포넌트로 와서 태그로 감싸져 있는 제목과 내용을
{} <= 함수를 쓸때에는 이와같이 중괄호를 사용하고 코딩하여야한다.
map 메소드를 사용해 인자로 card를 작명해주고
제목과 내용에다가 card.title를 써서
카드가 만들어 지도록 구현했다.
InputBox컴포넌트에 setTitle(""), setContent("")를 써서 추가하기 기능후에 인풋 란이
비워 질 수 있도록 구현하였고
삭제 기능을 구현하였고,
이때 filter메소드를 사용하였다.
이때 todoCard state를 배열로 초기값을 만들어준 이유이다.
map과 filter메소드를 사용하기위해**
이때 함수를 사용할때 매개변수가 온다면 양 옆으로 괄호를 이와 같은 방식으로 사용해야한다.
그냥 외웠다....
filter메소드는 card라는 인자에 객체에 있는 id를 가져오고
!== id 이렇게 오른쪽에 있는 id는 onClickDeleteButton 함수에 인자로 가져와서 비교하게 된다.
그거와 일치하지 않는 것을 트루로 반환해서 일치하는 것을 제외 즉 filter시켜주고
나머지 카드들만 보이게 해서 삭제 기능을 구현 하였다.
마지막으로 Working... 에서 Done..으로 이동 시키는 것을 구현하기위해
함수를 먼저 만들어줬다.
여기서 보면 Map을 사용하였는데
newCard객체 안에 Done는 false를 해서 불린형으로 만들어 주었다.
card.Done를 true로 반환 해주고
삼항 연산자를 사용해서 카드가 버튼에따라서 삭제 및 제거
워킹존 돈존 이동까지 구현 하였다.
