공부블로그

이거땜에 ㄹㅇ 하루종일 삽질을 해버렷다... todo list에서 분명 항목을 삭제했는데 수정하려고 클릭하면 계속 다른 값이 나오는 문제였다....왜냐면 코드가 이랫기 때문... //props로 받은 todoItem const Item = ({ todoItem, index } : Props) => { ... const [updateText, setUpdateText] = useState(todoItem.title) console.log('todoItem,title : ',todoItem.title ) console.log('updateText : ',updateText) } 변경된 todoItem이 전혀 반영되지 않는다 props를 useState에 할당하면 안되는 이유 useState는 최초 한번만 호..

이 글은 유튭 코딩애플님의 React 기초 강의를 듣고 정리한 글입니당 https://youtu.be/LclObYwGj90 node.js 는 왜 설치할까? npm이라는 툴을 사용할 수 있다. npm으로 create react app이라는 라이브러리를 설치 각 폴더 설명 node_modules: 라이브러리 모은 폴더 public: static 파일 보관함 ( 이미지 등.. ) src: 소스코드 보관함 ( 실질적인 코딩을 하는 곳 ) - package.json 파일: 설치한 라이브러리명, 버전 목록 메인 페이지 동작원리! Index.js가 App.js을 Index.html에 넣어줌 = App.js(메인 페이지)의 html(return 부분)을 index.html(실질적인 메인페이지)의 id가 root인a d..

▶ Routing : URL에 따라서 적당한 콘텐츠를 전송해주는 것 BrowserRouter는 최상위 컴포넌트를 감싸주어 BrowserRouter를 사용가능하도록 해준다. url에 따라 달라져야하는 컴포넌트에 Route로 감싸주고 path지정 Link : 페이지가 바뀌지 않고 링크로 이동 NavLink : 클릭 시 해당 a태그에 active class생성 => css의 .active로 스타일 변경가능 ◎ 기본 작업 create-react-app 을 통해 새로운 프로젝트를 생성하고 npx install react-router-dom 을 통해 라우팅 도구 설치 후, import { BrowserRouter, Route, Switch, Link, NavLink ,..

태그는 꼭 닫는다. 두 개 이상의 태그는 무조건 하나의 태그로 감싼다. ( 이 때 리액트의 Fragment를 이용하기도 한다. ) 자바스크립트 변수를 보여줘야 할 때에는 { } 중괄호로 감싸준다. 태그에 style과 CSS class를 설정할 때 인라인 스타일은 객체형태로 작성하고 ( class style = { ... } ), CSS class를 설정할 때에는 className= 으로 설정해준다. props를 통해 컴포넌트에게 값 전달하기 1. Hello 컴포넌트에 name과 color라는 props (속성)을 전달해주고 싶을 때 App. js 에서 props 전달 Hello. js 에서 받아서 작성 function Hello(props) { return 안녕하세요 {props..

Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다. 리액트 내장 Hooks를 사용하는 방법을 배우고 커스텀 Hooks를 만들어보자. 8. 1 ) useState useState는 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있도록 해준다. ( 3장에서 배움 ) Counter. js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 // value값 업데이트 setValue(val..

함수형 컴포넌트로 작성 App. js import React from "react"; import Counter from "./Counter"; const App = () => { return 컴포넌트; //props사용 }; export default App; Counter. js // input을 두개 받아서 + or - 버튼을 누르면 연산하기 import React, { useState } from "react"; //함수형 컴포넌트라 useState사용 const Counter = ({ role, children }) => { //props파라미터로 받기 const [number, setNumber] = useState({ one: "", two: "" }); //객체 초기값 const [resu..

모든 리액트 컴포넌트에는 라이프사이클( 수명주기 )이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하다 보면 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. 이때 컴포넌트의 라이프사이클 메서드를 사용한다. (라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있고, 함수형에서는 Hooks기능을 사용해 비슷한 작업을 처리할 수 있다.) 7. 1 ) 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이..

눈사람 얼음 눈 바람 웹 애플리케이션을 만들다 보면 위와 같이 형태가 계속 반복되는 경우가 있다. 리액트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법에 대해서 알아보자. 6. 1 ) 자바스크립트 배열의 map( )함수 map( ) : 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 변환하고 새로운 배열을 생성한다. 6. 1. 1 ) 문법 arr.map( callback, [thisArg] ) callback: 새로운 배열 요소를 생성하는 함수로 3개의 파라미터를 받는다. ( currentValue: 현재 처리하고 있는 요소, index: 의 인덱스값, array: 현재 처리하고 있는 원본 배열 ) thisArg: callback함수 내부에서 사용할 this 레퍼런스 6. 1. 2 ) 예제 ..