Category: React-Preview

2020
0
TILReact-Preview

배열에 항목 추가하기

React with Velopert - 11 - 배열에 항목 추가하기 예제 : 배열에 새로운 항목을 추가하기 새로운 컴포넌트 작성 : CreateUser.js 상태관리 추가 : App.js 1차 최종 코드 : App.js 배열 상태관리 추가 : App.js Spread 연산자 이용 최종 코드: App.js concat 함수 이용 최종 코드:

0
TILReact-Preview

useRef 로 컴포넌트 안의 변수 만들기

React with Velopert - 10 - useRef 로 컴포넌트 안의 변수 만들기 예제 : useRef 를 사용하여 변수를 만들기 UserList.js App.js Chap 10. useRef 로 컴포넌트 안의 변수 만들기useRef 로 컴포넌트 안의 변수 만들기 컴포넌트에서 특정 DOM 을 선택해야 할 때, ref 를

0
TILReact-Preview

배열 렌더링하기

React with Velopert - 09 - 배열 렌더링하기 기본 배열 렌더링 UserList.js map 함수를 이용한 배열 렌더링 UserList.js key 추가하기 key의 존재유무에 따른 업데이트 방식 key가 없을 시 key가 존재할 시 Chap 9. 배열 렌더링하기배열 렌더링하기 다음과 같은 배열이 있다고 가정해보

0
TILReact-Preview

useRef

React with Velopert - 08 - useRef 예제 : 초기화 버튼을 클릭했을 때 이름 input 에 포커스가 잡히도록 useRef 를 사용하여 기능을 구현 InputSample.js Chap 8. useRef 로 특정 DOM 선택하기useRef JavaScript 를 이용하여 특정 DOM을 선택하는 상황에서 우리는 ge

0
TILReact-Preview

여러개 input 상태 관리하기

React with Velopert - 07 - 여러개 input 상태 관리하기 예제 : 여러 input 박스 입력 및 초기화 버튼 만들기 (상태 관리하기) App.js InputSample.js 주의점-불변성 Chap 7. 여러개의 input 상태 관리하기여러개 input 상태 관리하기 input 상태가 다수 일 경우 관리를 하는 방법을

0
TILReact-Preview

input 상태 관리하기

React with Velopert - 06 - input 상태 관리하기 예제 : input 박스 입력 및 초기화 버튼 만들기 App.js InputSample.js Chap 6. input 상태 관리하기input 상태 관리하기 이번에는 리액트에서 사용자가 입력 할 수 있는 input 태그의 상태를 관리하는 방법을 알아보자. 예제 :

0
TILReact-Preview

조건부 렌더링

React with Velopert - 04 - 조건부 렌더링 예제 App.js Hello.js React에서 연산자의 쓰임처 Hello.js props 값 설정을 생략하면 ={true} App.js Chap 4. 조건부 렌더링조건부 렌더링 조건을 이용하여 렌더링 결과를 결정할 수 있다. 예제App.js / Hello.js 2가지

2019
0
TILReact-Preview

props를 통해 컴포넌트에게 값 전달하기

React with Velopert - 03 - props 를 통해 컴포넌트에게 값 전달하기 props 란 ? props의 기본 사용법 여러개의 props, 비구조화 할당(디스트럭처링) defaultProps 로 기본값 설정 props.children 조건부 렌더링 예제 : 특정 props의 값이 true 또는 false 에 따라서 컴포넌트

0
TILReact-Preview

JSX

React with Velopert - 02 - JSX JSX 란? JSX를 사용하는 이유 JSX 작성 주의점 null, false, undefined 를 렌더링하게 된다면 아무것도 나타나지 않게 된다. class 가 아니라 className 으로 정의해야한다. <img> 안에 무조건 alt 속성을 작성해야한다. 변수를 값으로