React

리액트가 필요한 이유? 1. Component기반의 UI라이브러리, 2. 선언형 프로그래밍,JSX문법 3. Virtual DOM

1.반드시 모든 태그를 닫아줘야 한다.``=셀프클로징 태크 2.최상위태그 규칙(부모태그) 만약 부모태그없이 JSX문법을 사용한다면, JSX expressions must have one parent element라는 알림이 뜬다. 안묶고 싶다면 React.Fragmen

State란? 상태란 계속해서 동적으로 변화하는 특정 상태(=값), 상태(=값)에 따라 각각 다른 동작을 함 리엑트에서 말하는 상태는 컴포넌트가 갖는 테마처럼 계속 값이 바뀔 동적인 데이터이고, 상태를 바꾸는 등의 관리는 이걸 가진 컴포넌트가 직접 관리하게 된다.

리액트에 input, textarea, select, button 태그를 이용하여 일기장을 만들어보았다. 스프레드연산자,onChange,onClick함수를 사용하는 방법

useRef 로 특정 DOM 선택하기 JavaScript 를 사용 할 때에는, getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리액트에서는 useRef()라는 HOOK함수를 통해서 DOM에 접근

💡map() 이란? 자바스크립트 배열 내장함수 리액트에서 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열 내장함수인 map()을 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해줍니다.

컴퓨터 코드를 작성하기 전, 🔥생각한것을 어떻게 작업해야할지 컴포넌트 트리를 그림으로 그려보는 시간을 가져야한다!! 지금까지 일기장을 설계한 구조는 `부모 컴포넌트아래에 자식 컴포넌트(작성폼)와 `자식 컴포넌트(일기리스트)가 연결되어있는 구조이다.

useState( )로 배열 추가하기 - 일기장 예제

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환합니다.원하는 값들을 필터링 하는 것filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을

배열을 이용한 React의 List에 아이템을 동적으로 수정하기 (with조건부렌더링) 🎯코딩 순서 정리 DiaryItem.js에 가서 수정버튼을 생성한다. 수정버튼을 클릭하면 버튼은 수정취소,수정완료 버튼으로 바뀌고 수정완료버튼을 누르면 다시 수정하기,삭제하기의

💡Lifecycle이란? = 생애주기 사람으로 따지면 생애주기는 영유아 ~ 노년기를 뜻한다. React로 따지자면 화면에 화면에 나타나고, 리렌더되고, 없어지는것을 생애주기라고 볼 수 있다. Lifecycle을 제어한다는 말은 컴포넌트가 탄생하고 변화하고 죽는

💡useEffect( )란? import React, { useEffect } from "react"; useEffect또한 React가 제공하는 기능 중 하나이므로, React에서 import받아와야 한다. 두개의 파라미터를 갖는것처럼보인다. 첫번째파라미터로는 콜

💡fetch()란? 자바스크립트 내장 객체 (API 호출하는 역할) fetch() 함수는 엄밀히 말해, 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch()로 사용되기도 한다. ▶️ fetch()사용 방법

DOM업데이트순서, Re-Rendering, 최적화에 대하여

💡useMemo()란? React의 Rendering 성능 최적화를 위한 Hook 사용방법 React의 기능이므로 항상 상단에 import를 해줘야한다. import React, { useMemo } from "react"; > const memoizedValue

💡React.memo란? React.memo(re-rendering이 일어나지않았으면 하는 컴포넌트)를 입력하면 props가 변화하지않으면 반환되지않는 고차 컴포넌트(강화된 컴포넌트)를 돌려준다. 물론 자기자신의 state가 바뀌면 re-rendering이 일어난다

💡useCallback()이란? React의 Rendering 성능 최적화를 위한 Hook 사용방법 import React, { useCallback } from "react"; React의 기능이므로 항상 상단에 import를 해줘야한다. useCallback(

크롬의 확장도구로 React Developer Tools를 사용하면 보다 더 편하다. 오늘은 components에서 highlight updates when components render를 이용해서 화면을 볼 예정이다. 📖예제 일기리스트에 있는 목록 중 하나를

💡useReducer()란? 사용자 리스트 기능에서의 주요 상태 업데이트 로직은 App 컴포넌트 내부에서 이루어졌었습니다. 상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정해주었는데요, 상태를 관리하게 될 때 useState 를 사용하는것 말

useReducer를 사용하여 일기데이터 상태변화로직을 App.js컴포넌트로부터 분리한다App.js컴포넌트에서 기존 작성했었던 useState를 주석처리하고 useReducer로 관리(useReducer를 사용하는 이유는 복잡한 상태변화로직을 컴포넌트 밖으로 분리하기위

리액트 프로젝트중, 감정다이어리를 만들때, useRef를 사용한 적이 있다.useState는 자주 사용해서 어떤것인지 알지만, useRef는 특정 DOM 엘리먼트를 참조하는 용도로만 사용해왔기에 참조한다는 개념밖에 없어서 명확히하기 위해 자세히 공부가 필요해서 정리하였

React.js는 라이브러리이고, Next.js는 React.js의 프레임워크이다. 이 둘의 궁극적인 차이점은 "응용 프로그램의 흐름 주도권을 누가 가지고 있느냐"이다.• 코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트