나아가기

useRef( )는 훅(hook) 함수이다. React 컴포넌트들은 기본적으로 내부 상태(state)에 변화가 생길 때마다 다시 랜더링(rendering)이 된다. 그 중 useRef 함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당한다. 이 current 속성은 값을 변경해도 상태를 변경할 때처럼 React 컴포넌트가 다시 랜더링되지 않는다. React 컴포넌트가 다시 랜더링 될 때에도 이 current 속성의 값이 유실되지 않는다. useRef 사용하기 Reset 버튼을 클릭했을 때, 이름에 포커스가 잡히도록 useRef 사용하기. 1. Input.js를 생성하고, 기본 틀 만들기 import React, {useState, useRef} ..

배열 랜더링 1. List.js를 생성하고 기본 폼을 만들어준다. import React from 'react'; function User({user}){ return( {user.username} ({user.email}) ); } export default List; 2. 배열 나타나게 해주기 import React from 'react'; function User({user}){ return( {user.username} ({user.email}) ); } function List(){ const user = [ { id: 1, username: 'user01', email: 'user01@email.com' }, { id: 2, username: 'user02', email: 'user02@ema..

컴포넌트에서 동적인 값을 state라고 부른다. 리액트는 state가 변경될 때, 그 state가 포함된 HTML을 자동으로 재렌더링한다. 결국 state는 번역하면 '상태'인 것이고, useState는 상태를 사용하는 것이다. '상태'를 변화시키는 '상태변경함수'를 통해 변경하면 그 상태를 화면에 반영해주는 것이다. 1. 내장함수로 상단에 import를 해줘야 한다. import React, {useState} from 'react'; 2. 변수를 선언하여 useState 함수를 넣어준다. useState는 두개의 값을 가지게 되는데, '원본'과 '변경하는 함수'를 가진다. const[original, originalHandler] = useState('원본'); ▶ original : 원본; ▶ or..

작업 환경 설정 1. Node.js 다운로드 및 설치 2. VS Code설치 3. npm install -g create-react-app : 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 환경 구축을 도와줌 4. npm install npx -g 5. npx create-react-app FRONTTEST : 폴더명이 "FRONTTEST"인 새로운 리액트 프로젝트 만들기 6. cd FRONTTEST : 명령어를 실행해 해당 디렉터리로 이동한다. 7. npm start로 프로젝트 실행시켜보기 다음과 같은 창이 띄면 기본 셋팅 완료!! REACT의 중요한 키워드 : 컴포넌트 1. 컴포넌트 만들기 >> src 안에 Hello.js 만들기 import React..