한 걸음씩

▷ Coin Tracker API를 이용하여 코인 정보를 불러오기 →useEffect import Button from "./Button" import styles from "./App.module.css" import { useEffect, useState } from "react"; function App(){ // loading은 로딩 상태를 나타냄 const [loading, setLoading] = useState(true) // coins는 코인 데이터를 저장함 const [coins, setCoins] = useState([]) useEffect(() => { // fetch함수는 promise를 반환하므로 then 메서드를 사용해 비동기적으로 데이터를 처리함 fetch('https://ap..

▷ To Do List 할 일 생성 (Enter 또는 button 제출) // App.js import styles from "./App.module.css" import { useState } from "react"; function App(){ // setToDo는 toDo값을 변경하는 함수 // toDo는 input태그와 연결되어있다 const [toDo, setToDo] = useState("") // toDos는 이전의 투두 기록을 가지고 있는 배열 상태, 기본값으로 빈배열 설정함 const [toDos, setToDos] = useState([]) // onChange함수는 입력 요소에서 입력 이벤트가 발생했을 때 호출된다 // 'event.target.value'를 통해 사용자가 입력한 값을..

▷ useEffect 컴포넌트 실행 최초 1회만 랜더링 의존성 배열을 활용하여 해당 배열의 상태가 변경될 때만 useEffect의 콜백 함수가 실행되도록 설정할 수 있다 의존성 배열에 포함되지 않은 상태의 변경은 useEffect를 통한 동작을 트리거하지 않으므로, 해당 상태의 변경에 따른 불필요한 리랜더링을 방지할 수 있다 따라서 useEffect를 사용하면 상태 변경에 따른 리랜더링을 제어하고 최적화할 수 있다 useEffect(setup, dependencies?) useEffect(실행하고자하는 코드, 변수나 상태가 변화할때 react.js가 코드를 실행시켜야하는 것) import Button from "./Button" import styles from "./App.module.css" impo..

1. node.js 설치 https://nodejs.org/ko/download 2. 터미널에서 node -v 명령어로 node.js 설치 확인 설치가 되었다면 버전이 출력됨! node -v 3. npx를 입력해서 npx 커맨드를 작동시킬 수 있도록 준비 npx 4. 리액트 애플리케이션 생성 아래의 my-app은 프로젝트 명으로 사용자가 원하는 대로 명명 npx create-react-app my-app 5. my-app 폴더를 찾아서 vs code로 열기 터미널에서 code my-app 입력해서 찾기 또는 직접 폴더를 검색해서 찾기 code 프로젝트 폴더명 6. vs code에서 my-app 폴더를 열어서 터미널 창에 npm start 입력을 하면 자동으로 localhost:3000 페이지 로드 개발하..

▷ Props 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달하기 위한 메커니즘 부모 컴포넌트는 자식 컴포넌트에게 데이터를 넘겨주고, 자식 컴포넌트는 이러한 데이터를 활용하여 UI를 구성하거나 다른 작업을 수행한다. props는 부모 컴포넌트에서 자식 컴포넌트로 '읽기 전용'으로 전달된다. 즉, 부모 컴포넌트에서 전달한 props는 자식 컴포넌트 내부에서 변경할 수 없다. props는 컴포넌트 내에서 함수의 매개변수처럼 사용된다 컴포넌트는 어떤 JSX를 반환하는 함수 ▷ memo 컴포넌트의 성능 최적화를 위해 사용되는 기능 중 하나 컴포넌트의 재랜더링을 방지하여 성능을 향상시키는 역할을 한다 상태나 속성(props)이 변경되면 재랜더링 된다. 그런데 동일한 결과를 가지는 경우 불필요한 재랜더링을 방지하..