react
배열 렌더링하기(react)
리액트에서 배열 랜더링 하기 !포인트! 1. map()함수 2. 컴포넌트 2개 사용 3. 고유 키 값이 있어야 함 (없으면 index 값이 들어감) 첫번째 방법 그대로 넣기 import React from 'react'; function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; return ( {users[0].username} ({users[0].email}) {us..
여러개의 input 상태 관리하기
앞서 작업한 input 컴포넌트에 이어서 이번에는 여러개의 input 의 값들의 상태를 관리했다. onchcnge 함수를 여러개 만드는 것 보다 아래에 객체를 생성하여 여러개의 input 을 관리하는 방법의 코드를 작성하였다. import React ,{useState} from 'react'; function Inputs() { const [text, setText] = useState({ num:'', nickname:'', }); const { num, nickname } = text; // 비구조화 할당을 통해 값 추출 console.log({num}) const change = (e) => { const { value, name} = e.target; // 우선 e.target 에서 name 과..
input 상태 관리하기
예제 코드 import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } export default InputSample; input 에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input 이 값이 비워지도록 구현을 해보겠습니다. 이번에도, useState 를 사용합니다. 이번에는 input 의 onChange 라는 이벤트를 사용하는데요, 이벤트에 등..
useState 를 통해 컴포넌트에서 바뀌는 값 관리하기
사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 수 있는지에 대하여 정리 1. 리액트 훅스가 도입되기전에는 함수형 컴포넌트에서 state 를 사용할 수 없어 클래스형 컴포넌트로 수정한 후 state, setState 를 사용하였다 하지만 훅스가 도입되고 난 후로 useState 라는 함수가 도입되어 현재는 함수형 컴포넌트에서도 state 를 사용할 수 있게 되었다고 한다. 사용법 : import React,{useState} from 'react'; function Counter() { const [num, setNum] = useState(0); const onIncrease = () => { setNum(num + 1); //상태를 업데이트 } const onDecrease = () => { s..
조건부 렌더링
조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다. import React from 'react'; function Hello({color,name,isSpecial}) { return ( {isSpecial && *}안녕하세여{name} ); } Hello.defaultProps = { name: '이름없음' } export default Hello; 리액트 컴포넌트에 조건부 렌더링 && 사용 // false //true //true 자바스크립트 이기때문에 트루는 {} 중괄호로 감싸준다. isSpecial && * 의 결과는 isSpecial 이 false 일땐 false 이고, isSpecial이 true 일 땐 * 가 됩니다.