1. useState 를 이용하여 list 값 추가하기 & map 함수 이용 - 기존의 변수 선언과 같이 코드를 작성하고 빈 배열로 초기화해준다. - [ setList ( listName => [...listName, valueName]) ] 형식으로 새로운 value 를 기존의 리스트에 추가할 수 있다. - map 함수를 아용하여 리스트에 있는 값들에 접근할 수 있다. - map 함수의 첫번째 인자는 리스트 내의 요소를 가져오고, 두번째 인자는 해당 요소의 index 를 가져온다. import { useState } from "react"; function App() { const [todo, setTodo] = useState(""); const [todos, setTodos] = useState([..

1. react app 만들어서 사용하기 - 'npx create-react-app 파일명' 명령어를 터미널에 입력하여 react app 을 생성할 수 있음. 더보기 - 위의 명령어로 처음 react app을 생성한 후 'npm start' 명령어를 사용하면 나타나는 첫 화면 - App.js, index.js 파일 외 다른 파일 모두 제거 - 이전에 공부했던 내용 사용해 보기 (useState, onClick) - react 는 새로운 값이 변경될 때 변경되는 부부만 그리는데 다시 그릴 때 app 함수의 모든 코드를 한 번씩 실행한 후 바뀐 부분을 수정하는 형식이다. - 따라서 useEffect 를 이용해서 처음으로 화면이 그렬질 때 한 번만 실행될 코드를 설정할 수 있다. - [ useEffect (함..

react 에 대한 공부를 본격적으로 시작하기 전에 js 문법을 이용한 react js 강의가 있어서 js 복기 차원에서 공부를 시작했다. 강의를 듣고 작성한 코드를 정리하는 수준으로 글을 작성할 예정이다. 강의 내용을 정리하고 작성한 코드를 기록하는 정도로.... 제발 듣고 까먹지 좀 말자는 차원에서 작성해보는 글이기에... 글쓰면서 다시 한 번 복습해본다. 1. 기존의 js - 태그를 이용하여 js 작성. - 'getElementById' 를 이용하여 태그에 있는 요소들을 id 이름을 기준으로 가져올 수 있음. - 'querySelector' 를 이용하여 태그 이름을 통해 해당 태그의 요소를 가져올 수 있음. - 'addEventListener' 를 이용하여 버튼을 누를 때 [handleClick] ..