Web/React+React Native
Input 상태 관리 +useRef
1. 단일 Input 필드 상태 관리하기=> input에 입력하는 값이 하단에 나타나게 하고, 초기화버튼을 누르면 input 값이 비워지도록 구현을 해본다. -InputSample.js => 이번에도 useState를 사용하고, input의 onChange 이벤트를 사용하여 이벤트에 등록할 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용한다. 이 객체의 e.target은 이벤트가 발생한 Input DOM을 가리키게 된다. e.target.value로 접근하면 현재 input에 입력한 값이 무엇인지 알 수 있다. import React,{useState} from 'react'; function InputSample(){ const [text,setText]=useState(''); //초기값 설정 ..
useState를 통해 컴포넌트에서 바뀌는 값 관리
=> 컴포넌트에서 보여줘야 하는 내용이 사용자 인터렉션에 따라 바뀌어야 할 때, 어떻게 구현하는가? Counter.js =>counter에서 버튼이 클릭되는 이벤트가 발생했을 때, 특정 함수가 호출되도록 설정하였다. - 리액트에서 element에 이벤트를 설정해줄 때에는 on이벤트이름={실행하고싶은함수} 형태로 설정한다. - useState를 이용해 동적인 값 관리하기 useState를 사용할 때에는 상태의 기본값을 파라미터로 넣어서 호출해준다. => 이 함수를 호출해주면 배열이 반환되는데, 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수이다. - onIncrease와 onDecrease에서 setNumber를 사용할 때 그 다음 상태를 파라미터로 넣어준 게 아닌, 값을 업데이트하는 함수를 파..
props+ 조건부 렌더링
1. Props를 통해 컴포넌트에게 값 전달 1) Props란 무엇인가? => properties의 줄임말로, 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용한다. - App 컴포넌트에서 Hello 컴포넌트를 사용할 때, name이라는 값을 전달해주고 싶다고 가정할 때 => 그 후에 Hello 컴포넌트에서 name값을 사용하고 싶을 때는 어떻게 하면 될까? => 컴포넌트에게 전달되는 props는 파라미터를 통해 조회할 수 있다. 2) 여러개의 props, 비구조화 할당 => Hello 컴포넌트에 또 다른 props를 전달해보자. name과 color값을 둘 다 설정한다. => Hello.js => Hello.js (비구조화 할당 문법 사용) 3) defaultProps로 기본값 설정 => 컴포넌트에 pr..