리액트19 11. 배열 렌더링하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/11-render-array.html 리액트에서 배열을 렌더링 할 때에는 key 라는 props를 설정해야한다. key 값은 각 원소들마다 가지고 있는 고유의 값으로 설정을 해야하는데 아래의 경우에는 id 이다. UserList.js import React from 'react'; // {user} : props를 통해 컴포넌트에 값 전달 function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.. 2022. 6. 24. 10. useRef로 특정 DOM 선택하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/10-useRef.html useRef : JavaScript의 getElementById , querySelector 같은 DOM Selector함수를 사용해서 DOM을 선택하는 것과 같은 의미 useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정 그러면 Ref객체의 .current 값은 우리가 원하는 DOM을 가리킴 focus() : DOM 객체에 focus하는 함수 import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name:.. 2022. 6. 24. 9. 리액트 상태에서 객체 수정 출처 - 벨로퍼트 https://react.vlpt.us/basic/09-multiple-inputs.html inputs[name] = value; ☝ 이런식으로 직접 수정하면 안됨 setInputs({ ...inputs, [name]: value }); ☝ 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용 ... : spread문법 객체의 내용을 모두 펼쳐서 기존 객체 복사 예시) const slime = { name: '슬라임' }; const cuteSlime = { ...slime, attribute: 'cute' }; console.log(cuteSlime) // 출력 결과 { name: '슬라임' attribute: 'cute' }; 2022. 6. 24. 8. input 상태 관리하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/08-manage-input.html input의 이벤트 onChange 이벤트 객체 e를 파라미터로 받아와서 사용 e.target : 이벤트가 발생한 DOM인 input DOM을 가리킴 따라서, const { value, name } = e.target 하면, value = “김다인” , name = “name” 인 상수가 선언된다. e.taraget.value : 현재 input에 입력한 값 input의 개수가 여러개 됐을 때는 객체 형태의 상태를 관리해주어야한다. 2022. 6. 23. 7. useState를 통해 컴포넌트에서 바뀌는 값 관리하기 출처 - 벨로퍼트 https://react.vlpt.us/basic/07-useState.html 이벤트 설정 import React from 'react'; function Counter() { const onIncrease = () => { console.log('+1') } const onDecrease = () => { console.log('-1'); } return ( 0 +1 -1 ); } export default Counter; 함수를 만들고, button 의 onClick 으로 각 함수를 연결해주었습니다. 리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태로 설정해주어야 합니다. 여기서 주의하셔야 하는 점은, 함수형태를 넣어주어야 하지, 함수를 다음과 같.. 2022. 6. 23. 6. 조건부 렌더링 출처 - 벨로퍼트 https://react.vlpt.us/basic/06-conditional-rendering.html 지금은 내용이 달라지는게 아니라, 단순히 특정 조건이 true이면 보여주고, 그렇지 않다면 숨겨주고 있는데요, 이러한 상황에서는 && 연산자를 사용해서 처리하는 것이 더 간편합니다. import React from 'react'; function Hello({ color, name, isSpecial }) { return ( {isSpecial && *} 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' } export default Hello; 단축 평가 논리 계산법 참조 props 값 설정을 생략하면 ={true} import Reac.. 2022. 6. 23. 5. props 를 통해 컴포넌트에게 값 전달하기 출처 https://react.vlpt.us/basic/05-props.html props 는 properties 의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용합니다. props의 기본 사용법 App.js ... return ( ) ... Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; 여러개의 props 비구조화 할당 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default Ap.. 2022. 6. 23. 이전 1 2 다음 반응형