# react-basic
이전의 State 업데이트 시키기
state에 현재 어떤 값이 담겨 있는지 모르기 때문에 정확하게 이전 state에서 업데이트 시킬 데이터를 setState 해주기 위해서는 prevstate를 사용한다.
[React Basic] useState는 비동기이! (정확히는 setState)
reducer 공부하다 state 값이 한 박자 늦게 콘솔에 찍히는 것을 보고 이유를 알았는데 기억을 못하는 내 자신을 보며 기록하려고 한다.우선 화면에 렌더링된 잔고는 6000원이다.state에도 6000이라는 값이 담겨 있지만 콘솔에 console.log(money
[React Basic] React의 Hooks (feat. useReducer)
useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 hook 이다.리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다.리듀
[React Basic] 컴포넌트 LifeCycle 더 자세히 알아보기
게시글은 리액트 공부용이며 출처를 제시합니다.출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive모든 리액트 컴포넌트에는 라이프사이클(수명 주기)가 존재하낟.컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페
[React Basic] 컴포넌트 반복하기
리액트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다.리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.유동적인 데
[React Basic] ref
일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용한다.<div id="my-element"></div>특정 DOM요소에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를
[React Basic] 이벤트 핸들링
게시글은 리액트 공부용이며 출처를 제시합니다.출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive컴퓨터 프로그래밍에서 이벤트는 사건이다.예를 들면 사용자가 버튼을 클릭하는 사건도 하나의 이벤트라고 볼 수 있다.여기에서 클릭한
[React Basic] Custom Hook
게시글은 리액트 공부용이며 출처를 제시합니다.출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive리액트에서 기본적으로 제공되는 훅 이외 추가적으로 필요한 기능을 사용하기 위해 직접 만든다.여러 컴포넌트에서 반복적으로 사용되는
[React Basic] Hooks 사용 규칙
게시글은 리액트 공부용이며 출처를 제시합니다.출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive리액트 함수 컴포넌트의 최상위 레벨을 의미한다.따라서 반복문이나 조건문 또는 중첩된 함수들 안에서 훅을 호출하면 안된다.훅은 컴포
[React Basic] React의 Hooks (feat. useMemo, useCallback, useRef)
게시글은 리액트 공부용이며 출처를 제시합니다.출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep diveuseMemo() 훅은 Memoized value를 리턴하는 훅이다.파라미터로 Memoized value를 생성하는 create함
[React Basic] State (class component)
class componet에서 state가 무엇인지 알아보고 state를 변경하려면 어떤 방식으로 해야하는지 알아보자. 또한 state가 변경되면 어떤 일이 일어나는지 알아보자
[React Basic] 컴포넌트 만들기
컴포넌트의 종류에 대해 알아보고 컴포넌트가 어떻게 엘리먼트가 되어 DOM에 의해 브라우저에 나타나는지 알아보자
