리액트 정리

User 컴포넌트의 삭제 버튼이 클릭 될 때는 user.id 값을 앞으로 props 로 받아올 onRemove 함수의 파라미터로 넣어서 호출해주어야 합니다. 여기서 onRemove "id 가 __인 객체를 삭제해라" 라는 역할을 가지고 있습니다. 이 onRemove 함수는 UserList 에서도 전달 받을것이며, 이를 그대로 User 컴포넌트에게 전달해줄것입니다. 배열에 있는 항목을 제거할 때에는, 추가할떄와 마찬가지로 불변성을 지켜가면서 업데이트를 해주어야 합니다. 불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서는 filter 배열 내장 함수를 사용하는것이 가장 편합니다. 이 함수는 배열에서 특정 조건이 만족하는 원소들만 추출하여 새로운 배열을 만들어줍니다. (참고) https://react.v..

1. spread 연산자: 기존의 배열을 한번 복사하고 나서 새로운 원소 추가. 2. concat 함수: concat 함수는 기존의 배열을 수정하지 않고, 새로운 원소가 추가된 새로운 배열을 만들어줍니다. const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = [{id:1, name:'a'},{id:2, name:'b'},{id:3, name:'c'}] const object1 = {id:4, name:'d'} // ["a", "b", "c", "d", "e", "f"] console.log(array1.concat(array2)) console.log([...array1, ...array2]) // [Object { ..

부모-> function, props -> 자식 부모 컴포넌트 (App)에서는 전체 상태를 관리한다. function들과 state를 자식들에게 props로 내려줘서 자식은 받은 props를 function으로 업데이트 해준다. 자식들은 서로 이야기 안해. 부모한테만 올라갔다가 내려갔다 하는것임 ~ input value와 onChange는 짝으로 가야한다. 왜? 그래야 read-only가 안되고 setState로 event.target.name, e.target.value 값 써먹을 수 있거든, 컴포넌트 구조: App(메소드, 상태관리) --onChange, onRegister--> CreateUser (상단 인풋) --onRemove, onToggle--> ListUser (하단 리스트화) --onRe..

App에서 함수와 값들을 props로 내려준다면 ? App component에서 모든 상태를 지니고 있다. 여기서 함수도 만들어준다. - undoneTasks: 미완료 tasks. - todos: 현재 todo들 - onRemove - onToggle - onCreate TodoList는 onRemove와 onToggle을 직접적으로 사용하지 않음. TodoItem에서 필요해서 거쳐서 내려준 것. (비효율적) Context API (+useReducer)를 사용한다면? Context를 만들어서 각 component에서 필요한 것들을 끌어서 쓸 수 있게 할 것이다. 따로 function을 만드는 것이 아니라, state update에 필요한 action들을 만들고 dispatch만 넣어줄 것. TodoCr..

템플릿 리터럴 Template literal: styled component에서는 props읽기 불가. `` 태그드 템플릿 리터럴 Tagged template literal: 안에서 props를 읽어올 수 있다. div`{ props=>props.color ... }` / a`` / css`` 예시) 1) 간단한 styled component styled component에 props던져주고 읽기. 이 때, Tagged template literal을 사용한다. import React from "react"; import styled, { css } from "styled-components"; // Circle 이라는 컴포넌트를 만들건데, style된 div다. tagged template litera..

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있습니다. 이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋습니다. 다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있습니다. --> 부모 컴포넌트가 자식 컴포넌트에게 prop으로 컴포넌트를 내려줄 때, 리턴시 html 엘리먼트들 이렇게 감싸서 내려주면 자식은 {props.children}로 그 엘리먼트들을 받을 수 있다. 예시) 부모 ----- prop (color="blue" / , ) -----> 자식 function WelcomeDialog() { return ( Welcome Thank you for visiting our spacecraft!..

개발 준비: 1. CRA로 앱만들기 2. styled-components와 react-icons 라이브러리 추가 $ npx create-react-app mashup-todolist $ yarn add styled-components react-icons color scheme: https://yeun.github.io/open-color/ icons: https://react-icons.netlify.com/#/icons/md (react material design icons) 3. 컴포넌트 오버뷰:

리액트 앱은 기본 브라우저의 동작과 다르기 때문에, 페이지 넘나든 내역도 기본 브라우저가 제공하는 내용과 다른, react router로 써줘야 함. 동적라우트 사용 예시 /game/:name /category/:name 이렇게 카테고리 안에 라우트가 있을 때. 일일이 라우트를 만들어주기 힘드니까, 언제 바뀔지도 모르고. => 동적 라우트로 Switch 그 켜고 끄는 스위치가 맞다. 첫번째 일치하는 것만 렌더링 해준다 나머지 일치하는것들은 렌더링 x 다수의 라우터 -> 동시에 여러개 뜨는거 막음. 주의! switch를 쓰면 상위주소(/)도 일치하는걸로 쳐버려서 exact path를 해줘야된다. queryString 사용 예시 /category/JavaScript?page=3.. 4... 5... 부가정보..