본문 바로가기

useState3

리액트 배열에 데이터 추가하기 다음은 동물 종류와 동물 울음소리를 지정한 배열입니다. 이를 state에 animals 라는 이름으로 저장하겠습니다. //animals state, 동물과 울음소리가 들어있음 const [animals, setAnimals] = useState([ { id : 1, animalType : '고양이', sound : '야옹' }, { id : 2, animalType : '강아지', sound : '멍멍' }, { id : 3, animalType : '닭', sound : '꼬꼬댁' } ]); input을 이용하여 데이터를 추가하기 위해 다음과 같은 메서드를 선언하였습니다. //animals state에 새롭개 생성된 animal 객체 추가 const onCreate=()=>{ const animal =.. 2022. 5. 13.
리액트 useState 여러 요소 다루기 state 내 여러 요소가 있다면 다음과 같이 관리할 수 있다. 1) 선언 const [inputs, setInputs]=useState({ nickname : '', name : '' }); 여기서는 nickname과 name 2가지 요소를 관리한다. 2) 추출 const {name,nickname} = inputs; inputs 내부의 name과 nickname을 추출하였다. 이제 함수 내부에서 {name}, {nickname}으로 해당 값을 가져올 수 있다. 3) 이벤트 변화 //입력값 출력 const onChange = (e)=>{ const {value,name} = e.target; //타겟의 name과 value 가져오기 console.log(value + " " +name); setInpu.. 2022. 5. 6.
리액트 함수형 컴포넌트 0. 선언 function 컴포넌트명(props){ return ( jsx 문법 ) } export default 컴포넌트명; 1. useState const [number, setNumber] = useState(props.number); state를 세팅할 때 사용한다. 위 코드는 state.number를 props.number로 지정하고, setNumber(변경사항) 은 state의 number를 변경사항으로 변경한다. 2.useEffect useEffect(function(){ render 후 실행, 반환 전 return ( 반환 후 실행 ); }); render 이 후, 컴포넌트 반환 전 실행 return 은 반환 후 실행 (clean up) 3.useRef const nameInput = us.. 2022. 5. 5.
반응형

티스토리툴바