useRef const refContainer = useRef(initialValue); useRef는 전달된 인수(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. HTML 문서에서 Javascript를 이용해서 element를 제어했듯이 useRef를 통해서 React에서는 element를 제어할 수 있다. ...

useReducer const [state, dispatch] = useReducer(reducer, initialArg, init); 리액트 공식문서에 의하면 useState의 대체 함수라고 설명한다. reducer는 (state, action) => newState 형태의 함수이다. 그리고 reducer는 현재의 State(ini...

When to use Context Context는 데이터는 제공하는 방법이다. 리액트 컴포넌트에서 데이터를 전달하기 위해서는 사용하고자 하는 데이터가 필요한 컴포넌트를 먼저 구분하고, 그 컴포넌트들의 공통 부모가 되는 컴포넌트를 찾아 그곳에서 useState를 통해 데이터를 관리하고, 필요한 컴포넌트까지 각 단계의 컴포넌트들에게 props를 통해 ...

useState const [state, setState] = useState(initialState); useState는 값, 그리고 업데이트 함수를 반환한다. 최초 렌더링 시, useState의 인자로 전달받은 초기값을 렌더링한다. setState함수는 state 값을 업데이트하며, state가 업데이트되면 state를 출력하는 컴포넌...

Hooks는 React 16.8버전에 새로 추가되었다. Hooks은 React class 없이 state를 사용할 수 있다. State Hook import React, { useState } from 'react'; function Example() { const [const, setCount] = useState(...

What is the difference between state and props? State와 Props는 어떻게 다른가? state와 props는 둘 다 Javascript 객체이다. props는 component에 전달되는 객체이며 (함수 매개변수와 유사), state는 component 내부에서 관리되는 객체 (함수 내에 선언된 변수와 유사...

1. UI 컴포넌트 계층 구조 나누기 가장 먼저 디자인 시안을 보면서 컴포넌트를 나누어야 한다. 컴포넌트를 나눌때는 단일 책임 원칙을 고려한다. 하나의 컴포넌트는 한 가지 일을 하도록 설계하자!! 2. React로 정적인 버전 만들기 컴포넌트를 나누고 나면 UI 렌더링만 되고 동작은 없는 버전을 먼저 만들어 보자. 데이터 모델을 렌더링하는 정...

HTML form 요소들은 React의 다른 DOM 요소와 다르게 작동한다. form 요소는 자연스럽게 내부 상태를 가지게 되고, React에서는 form 요소의 내부 상태를 State로 관리할 수 있다. Controlled Components HTML form 요소들은 사용자 입력을 기반으로 내부 상태를 업데이트 한다. React에서는 오직 se...

반복되는 객체 Rendering Javascript의 Map() 함수를 활용하여 반복되는 렌더링 작업을 처리할 수 있다. Map() 함수는 Array 리스트를 받아 새로운 리스트를 반환하는 함수이다. const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = a...

React에서 조건에 따라 Components를 다르게 렌더링할 수 있다. 조건부 렌더링을 하는 방법은 세 가지가 있다. 요소 변수 논리 연산자 ‘&&’ 삼항 연산자 요소 변수 function LoginButton(props) { return ( <button onCl...