잿꽃's posting Garden

REACT 'ToDoList'를 만들기 위한 기초 연습 기존의 리스트가 주어지고 input상자에 내용을 입력해서 추가를 누르면 해당 내용이 리스트에 추가되는 작업을 연습해 보려고 한다. 연습을 하기 전에 어떤 순서도를 가지고 해야 할까? 1. 기존의 데이터가 주어지고 나타내 진다. 2. input상자에 입력한 값을 인지한다. 3. 버튼을 누르면 이벤트를 통해 인지한 값을 기존 데이터에 추가한다. 4. 추가된 데이터를 나타낸다. 1번의 기존 데이터가 추가에 따라 내용이 계속 수정될 예정이므로 useState를 써야 할 것이다. 기존의 데이터를 보기 위해서 map함수를 이용하여 태그 안으로 return할 것이다. 2번에서는 입력된 값을 인지해야 하므로 onChange이벤트가 필요하다. 3번에서는 버튼을 누르..

REACT Component 정리 [기본셋팅] src내에 문서 또는 파일을 만든다. 파일 이름은 대문자로 하고 파일 내에서 rsc를 작성하고 tab을 누르면 함수형 컴포넌트를 만들수 있다. app.js에서 위의 파일을 import하고 return안 프레그먼트에 해당 컴포넌트를 작성한다. app.js //////////////////app.js/////////////////////// import React, { Component } from 'react'; //새로 만든 컴포넌트를 import import ComponentsTest1 from './ComponentsTest1'; const app = () => { return ( //작성하고 내부에 만든 컴포넌트 작성 ); } export default..