react note

벨로퍼트와 함께하는 모던 리액트 강의를 바탕으로 내용 정리 DOM(Document Object Model)이란, 각 HTML 엘리먼트에 대한 정보를 지니고 있는 자바스크립트 객체이다. 우리는 웹 페이지의 내용을 동적으로 변경하고자 할 때마다 DOM을 수정한다.DOM 을

props : properties의 약자어떤 값을 컴포넌트에게 전달해줘야 할 때 사용Hello 컴포넌트에서 name값을 사용하고 싶다면 props를 파라미터 형태로 전달한다. 넘어온 props는 객체 형태로 전달되며, {props.name}과 같은 형식으로 조회한다.

컴포넌트를 통해 보여줘야 하는 내용이 사용자 인터렉션에 따라 바뀌어야 할 때 구현하는 방법에 대하여 알아본다. useState 함수는 hooks 중 하나 버튼 클릭 시 함수 실행 주의할 점: 클릭이 됐을 때(이벤트가 발생할 때) 함수를 호출 시켜야 하기 때문에

input 에 입력하는 값이 하단에 나타나고, 초기화 버튼을 누르면 input 이 값이 비워지도록 구현input의 onChange 이벤트 이벤트 객체 e : 수정 이벤트가 발생할 때 내용을 파라미터로 받아와 사용할 수 있다. 객체 안에 있는 e.target은 현재 이벤

html과 js를 사용할 때에는 특정 DOM을 선택해야하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택했다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 일이 발생하는데, 그럴

(1) 중복되는 코드가 발생하기 때문에 비효율적이다. 컴포넌트를 재사용할 수 있게 만들어준다. (2)배열이 고정적이라면 상관 없지만, 만약 배열의 내용이 동적이라면 렌더링하지 못한다. 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열의 내장함수 map() 을 사용한다

CreateUser.js상태 관리를 부모 컴포넌트인 App에서 하게 하고, input의 값 및 이벤트로 등록할 함수들을 props로 넘겨받아서 사용한다. App.js배열을 변화시킬 때도 객체와 마찬가지로 불변성을 지켜주어야 하기 때문에, 배열의 push, splice,

useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수

성능 최적화를 위해 연산된 값을 useMemo라는 Hook 을 사용하여 재사용하는 방법useMemo: 특정값이 바뀌었을 때만 특정 함수를 실행해서 연산하도록 처리첫번째 파라미터로 어떻게 연산할지 정의하는 함수, 두번째 파라미터로 deps 배열을 넣어준다. 이 배열 안에

이전에는 useState를 사용해서 상태를 업데이트 해주었는데, useReducer hook을 사용해서 상태 업데이트도 가능하다. 리액트에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 useState 함수이다. 그러나 좀 더 복잡한 상태 관리가

컴포넌트를 만들다 보면 반복되는 로직이 발생한다. ex. input 관리 이런 경우 커스텀 Hooks를 만들어서 반복되는 로직을 재사용할 수 있다. useInputs.js 만든 useInputs Hook을 App.js에서 사용하기 App.js

React는 React 컴포넌트 자신이 개별적으로 상태관리를 한다.React+Redux는 상태관리를 하는 전용 장소(store)에서 상태를 관리하고, React 컴포넌트는 그걸 보여주기만 하는 용도로 쓰인다.Store 및 Store에 존재하는 State는 아주 신성한

1) 프로젝트 생성 $ npx create-react-app learn-redux2) redux 라이브러리 설치 $ cd learn-redux $ yarn add redux

redux-toolkit 공식 문서 튜토리얼 내용을 개인 학습용으로 정리한 글입니다. Redux Toolkit은 Redux를 사용하기 쉽게 만들기 위해 Redux 팀에서 공식으로 제공하는 개발도구 입니다. Redux Toolkit은 Redux에 대한 세 가지 일반적인

redux-toolkit 공식문서 내용을 개인 학습용으로 정리한 글입니다. 배울 것 : Redux Toolkit 및 React-Redux를 TypeScript로 설정하고 사용하는 방법

redux-toolkit 공식 문서 사용 가이드 개인 학습용으로 작성한 글입니다. Redux Toolkit의 목표는 일반적인 Redux 사용 사례를 단순화하는 것입니다. Redux Toolkit이 Redux 관련 코드를 개선하는데 도움이 되는 몇 가지 방법을 살펴 보겠

Redux Toolkit 공식문서 개인 학습용 글입니다. 배울 것TypeScript와 함께 각 Redux Toolkit API를 사용하는 방법에 대한 세부 정보Redux Toolkit은 TypeScript로 작성되었으며 API는 TypeScript 애플리케이션과의 뛰어