#08 리액트 입문 : todolist 만들기 (리액트 컴포넌트 분리)

TIL 리액트로 투두리스트를 구현하면서, JSX문법 사용과 랜더링에 대해 배울 수 있었다. 리랜더링이 끝나는 시점에 대해 알 수 있었고, useState를 사용하여 리액트에게 변경값을 알려주는 개념을 직접 구현해보니 조금은 더 알 수 있는 계기가 되었다. 1.todolist 필수 구현 1. 제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성 2. Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 3. Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현 4. Layout의 최..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 6.
• textsms

#07 리액트 입문 : css 전체 화면의 가운데로 정렬 외.

1. Working 부분이 Done부분을 넘어서 표현 ▶ 원하는 기능 : 데이터가 늘어나는 만큼 div 부분이 유동적으로 늘어났으면 좋겠음. ▶개선 사항 : css 파일에서 "할일 박스" 부분을 height: auto 로 설정하였음 2. css 설정하였는데 미적용 (1) 완료 버튼을 클릭하면 done 부분으로 이동되는데 여기는 flex 설정이 아닌 'user agent stylesheet'에서 해당 div의 display: block 스타일로 적용이 되었음 * user agent stylesheet : 각 브라우저에서 정해놓은 css 규칙 => 새롭게 만들어서 덮어 씌워서 사용하면 된다함.. 하지만 안되서 콘솔에 나는 오류를 확인한 결과.. ▶ 실수한 부분: className 스펠링 오류였음.. 스펠링 ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 5.
• textsms

#06 리액트 입문 :: todolist 오류 정리 | list should have a unique "key" prop. 외

1. 오류 : 배열 메소드 오류 const initialState = [{ id: 0, title: '', body: '', isDone: false }]; ▶ 실수한 부분: 배열 메소드인데 객체로 선언했었음..😢 2. 개선 : 태그 이벤트 코드 수정 제목 titleHandler(event)}> ▶개선 사항 : event만 넘겨줄 경우, {titleHandler} 이렇게 변경해도 자동으로 event는 인자값으로 넘어감 3. 오류 : list should have a unique "key" prop. return ( 제목 내용 추가하기 {toDo.map(function (item) { return ( Working.. {item.title} {item.content} ); })} map에서는 key값을 설..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 3.
• textsms

#05 리액트 입문 :: 객체 API 사용하기 (Object.keys / Object.values)

import React from 'react'; function App() { const fruits = { apple: '사과', banana: '바나나', orange: '오렌지', }; const objVal = Object.values(fruits); const objKey = Object.keys(fruits); return ( {Object.values(fruits)[0]} {Object.values(fruits)[1]} {Object.values(fruits)[2]} {objVal.map(function (item, index) { return {item}; })} {objKey.map(function (item, index) { return {item}; })} {objKey.map(fun..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 3.
• textsms

#04 리액트 입문 :: 리액트 불변성과 중요한 이유 (immer.js)

TIL - 배열 메서드를 사용시 {...state,a :10} 과 같은 스프레드 용법을 사용해서 코드를 구현하지 않았는데 불변성에 배우고 나니, 잘못 코드를 구현하고 있음을 알게 되었다. 다음에는 참조값을 사용할 때는 불변성 개념을 생각하여 스프레드 용법을 잘 생각해야겠다. 1. 불변성 (immutability) 개념 - 원본 데이터 변형 x 데이터 변경 필요시 새로운 원본 만드는 디자인 패턴 (1) 불변성 x (mutable) : 배열 push 메서드 arr = [1,2,3]; / arr.push(4) -> arr = [1,2,3,4] (2) 불변성 (immutable) : 배열 map 메서드 arr = [1,2,3] / arr.map(x => x*2) -> arr = [1,2,3] (원본 데이터는 그..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 2.
• textsms

#03 리액트 입문 :: 카운터 앱 만들기

[내가 생각한 코드] const [value, upValue] = useState(0); * value값을 변경할 수 있는 유일한 방법 upValue 임 ★개선점 : value를 {value}로 넣으려고 했음. * 콘솔로 찍어보니 자바스크립트 표현하는 {}를 섞어서 생각하고 있었음...

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 2.
• textsms