KEEP CODING

useEffect 에서 dependency 문제 React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps useEffect(() => { // selectedKeyword 가 변할 때 ..

input type="checkbox"에서 checked 속성 관리하기 Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. 아래와 같이 onClick속성과 checked를 사용하니 위와 같은 오류메시지가 떴다. checked가 바뀔 필요가 없으면 defaultChecked로 바꾸거나, readOnly속성을 지정하라고 한다. 리셋 버튼을 통해 checkbox를 전체..

키워드를 선택할 수 있는 리스트를 만든다. App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import React from 'react'; import Category from "./components/Category.js"; import './App.css'; function App() { const category = [ {id: 1, title:"구성", sub:['연간', '월간', '주간', '일간']}, {id: 2, title:"기간", sub:['1년+', '1년', '6개월', '3개월', '1개월']}, {id: 3, title:"크기", sub:["A6-", "B6", "A5", "B5", "A4+"]}, {id: 4, ti..

폴더를 만들고 npm install -g create-react-app 을 실행했는데 아래와 같은 오류메시지가 나온 경우 npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. changed 67 packages, and audited 68 packages in 1s 4 packages are looking for funding run `npm fund` for details 3 high severity vulnerabilities To address all issues, run: npm audit fix Run `npm..

필요한 기능 키워드를 선택한다 선택한 키워드가 있는 제품만 보여준다 관심있는 것들 모아서 본다 클릭하면 판매 사이트로 이동한다 키워드 종류 날짜 형식 - 2022년, 만년 구성 - 연간, 월간, 주간, 일간 기간 - 1년+, 1년, 6개월, 3개월, 1개월 크기 - A6, B6, A5, B5, A4 커버 - 하드커버, 소프트커버, PVC 제본 - 양장, 스프링, 6공, 메모지 종이 무게 - 100g, 120g 기타 - 타임라인, 체크리스트, 밴드, 가름끈 주로 정보를 가져올 사이트 텐바이텐 1300k 브랜드 홈페이지 네이버 스토어 구매 링크 네이버 쇼핑 검색으로 이동? 다이어리 정보 이름 브랜드 이미지 키워드 링크 화면구성 모바일 페이지 아래 확인하기 버튼 대신 실시간으로 목록을 업데이트 할 수도 있음 ..

Delete기능을 위해 필요한 것 1. 원하는 자료를 삭제하는 기능 삭제된 후에는 state의 contents와 TOC에서 사라진 모습을 확인할 수 있다. 삭제 버튼은 ControlComponent안에 있다. ControlComponent에서 delete버튼을 눌렀을 때 삭제 기능을 하도록 만들어야 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

update를 위해 필요한 것 1. 기존 자료를 form에 불러오기 2. form안에서 수정하기 3. 수정된 자료를 저장하기 1. 기존 자료를 form에 불러오기 일단 UpdateComponent를 만든다. CreateComponent와 구성은 같고 기능이 다르다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 import React, { Component } from 'react'; class UpdateContent extends Component { render() { return ( Update ); } } export default UpdateContent cs 기본 구조는 위와 같다. 2. for..

mode변경기능 정보를 읽는 것은 구현했으니 나머지 Create, Update, Delete기능을 위해 새로운 컴포넌트를 만든다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import React, { Component } from 'react'; class Control extends Component { render() { console.log("Control render") return ( create update ); } } export default Control Colored by Color Scripter cs Control은 props로 onChangeMode라는 이벤트 함수를 전달받을 것이다. 이벤트를 통해 mode를 App 컴포넌트에 전달하도록 만들어야 한다...

이벤트 만들기 해당 컴포넌트가 아닌 하위 컴포넌트에서 발생한 이벤트를 이용해 상위 컴포넌트의 State를 변화시키려면 어떻게 해야할까? props로 이벤트 전달 -> 하위 컴포넌트 클릭시 이벤트 실행하도록 한다 -> 이벤트 통해 상위컴포넌트의 state변경 -> render -> 하위 컴포넌트에 변경된 props전달 -> 애플리케이션 동적 변화 Subject라는 Component에 onChangePage()라는 이벤트를 만든다. Subject안의 a태그를 클릭해 이벤트가 발생했을 때, props를 통해 전달된 이벤트가 실행되도록 한다. 1 2 3 4 5 6 7 8 // App.js cs 일단 state.mode만 바꾸는 함수를 만들고, TOC.js에서 a태그와 연결한다. 1 2 3 4 5 6 7 8 9 ..

이벤트 props, state, event 삼자가 상호작용하며 애플리케이션의 역동성을 만든다. 우리가 만들고 싶은 이벤트는 list 목록을 클릭했을 때, 아래의 내용이 바뀌는 것을 목표로 한다. 그러면 아래와 같은 과정을 거쳐야 한다. 링크 클릭→app 컴포넌트의 state 변화→Content 컴포넌트의 props값으로 전달→애플리케이션 동적으로 바뀜 React에서는 state/props의 값이 바뀌면 그 state를 가지고 있는 컴포넌트의 render()함수가 다시 호출된다. 그러면 상위 컴포넌트 안에 속한 하위 컴포넌트의 render() 함수들도 다시 호출되고, 화면이 다시 그려진다. console.log로 각 컴포넌트의 render() 함수가 호출될 때 마다 확인메시지를 띄워보았다. 첫 가동시에 A..