js에서 특정 DOM을 선택하는 getElementById 기능에 해당하는 Ref이다 1. Ref import import React, { useState,useRef } from 'react'; import로 useRef를 가져온다. 2. Ref 만들기 const select = useRef() 3. Ref사용 current를 사용하여 ref 해당하는 dom에 접근한다. //dom에 focus select.current.focus(); // select라는 ref를 선택 select.current

https://crispypotato.tistory.com/149 지난번은 input이 하나였지만 input값이 여러개인 상황에서도 useState하나만 사용 할 수 있다. 실제 코드 import React, { useState } from 'react'; function Input() { const [text, setText] = useState({ name:'', age:'' }) const {name, age} = text const change = (e) => { const {value,name} = e.target setText({ ...text, [name]: value }) } const reset = () => { setText({ name:'', age:'' }) } return ( 초기..

https://crispypotato.tistory.com/148 처럼 태그에 들어간 값을 useState로 변경을 똑같이 해주려고 할 때는 onChange 이벤트를 사용하여 input의 value값을 받아 사용한다. 사용 예시 input에 값을 넣어주면 onChange 함수를 통해 useState의 setter함수에 데이터가 들어간다 import React, { useState } from 'react'; function Input() { const [text, setText] = useState('') const change = (e) => { setText(e.target.value) } const reset = () => { setText('') } return ( 초기화 값:{text} ); }..

이벤트가 발생 하면 값이 변경되는 컴포넌트를 구현 할 때 리액트에 내장되어 있는 useState 함수를 사용한다. 사용방법 1. useState를 import 2. useState를 비구조화 할당 useState(0) : 초기 상태값을 default로 0 입력 number : 현재 상태 값 setNumber : setter로 바뀌는 값 *number , setNumber => test, setTest 처럼 이름이 변경이 가능하다. *사용 예 버튼 클릭시 함수로 인해 number이 변경 되는 예 import React, { useState } from 'react'; function Counter () { const [number, setNumber] = useState(0) const upCount = ..

조건문을 이용해 랜더링하는 컴포넌트를 바꿀 수 있다. Wrap에 status값을 보내준다. ( Boolean는 JS문법이기 때문에 { }를 사용한다. ) *Boolean값은 따로 false true 값을 주지않으면 default로 true이다. import logo from './logo.svg' import './App.css' import {Wrap} from './Wrap' function App() { return ( ) } export default App Wrap.js에서 status를 확인하고 true라면 를 랜더링하고, false라면 를 랜더링한다. import {Hello3, Hello4} from './Hello' function Wrap({status}) { if (status) { ..

부모 컴포넌트에서 자식 컴포넌트로 데이터를 Props를 이용해서 객체 형식으로 넘겨준다. 1. 부모컴포넌트에서 자식으로 props 데이터를 넘겨주는 방식 App.js : 부모 Hello.js : 자식 부모 hello : hello 이름으로 "안녕하세요" 데이터를 보낸다. introduce : introduce 이름으로 "제 이름은 리액트 입니다." 데이터를 보낸다. color : color 이름으로 "aqua" 데이터를 보낸다. 자식 부모 컴포넌트 (App.js)에서 보낸 Object를 propsData라는 이름으로 객체형식으로 받아낸다. 이때 [ hello, introduce ] 와 [ color ]의 사용 방법이 달라진다. hello : "안녕하세요" introduce : "제 이름은 리액트 입니다...