이다닷

➡️마운트/언마운트/업데이트 시 수행할 작업 설정하기 📌마운트/언마운트 마운트 : 컴포넌트가 나타나는 상황을 마운트라고 한다. 언마운트 : 컴포넌트가 삭제 될 때는 언마운트라고 한다. UserList.js 변경 import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { // useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); // return ( onToggle(user.id)} > {user.username} ({user.email}) onRemove(user.id)}>삭..

➡️onToggle을 추가해서 active 값에 따라 폰트의 색상 바꾸기 + cursor 필드에 마우스 오버시 커서 모양 바꾸기 APP.js 변경 import React, { useRef, useState } from 'react'; import UserList from './qoffhvjxm/UserList'; import CreateUser from './qoffhvjxm/CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const onChange = e => { const { name, value } = e.tar..

➡️삭제버튼 추가 UserList.js 변경 import React from 'react'; function User({ user, onRemove }) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({ users, onRemove }) { return ( {users.map(user => ( ))} ); } export default UserList; 변경사진 ➡️특정 id를 가진 객체를 삭제하는 기능을 가진 onRemove 함수 만들기 📌filter 함수 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만들어주는 함수이다. APP.js 변경 import React, { use..

📌저번시간에 useRef를 배울때 컴포넌트에서 특정 DOM을 선택해야할 때, ref를 사용한다고 했다. 그 이외에도 ref의 사용법은 있다. 바로, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것이다. App.js 변경 import React from 'react'; import UserList from './qoffhvjxm/UserList'; function App() { const users = [ { id: 1, username: 'dndhk', email: 'dndhk@gmail.com' }, { id: 2, username: 'Lee', email: 'Lee@gmail.com' }, { id: 3, username: 'dada', email: 'dada@gmail.com' } ];..

추가내용 UserList.js 추가 => 현재 방법은 가장 기본적인 방법으로 가장 비효율적인 방법이다. 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}) {users[1].username} ({users[1].email}) {us..

📌useRef란? 리액트를 사용하는 프로젝트에서도 가끔 직접 DOM을 선택해야하는 상황이 발생 할 때가 있다. 그리고 video.js, JWPlayer 같은 HTML5 Video 관련 라이브러, 또는 chart.js 같은 그래프 관련 라이브러 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM에 적용하기 DOM을 선택해 하는 상황이 발생할 수도 있다. => 그럴때 Ref라는 것을 사용한다! 초기 파일은 저번 시간에 완성한 MultiInput.js를 사용한다. ➡️우리가 저번 시간에 만들었던 내용은 초기화 버튼을 누르고나면 포커스가 초기화 버튼에 그대로 남아있게 된다. 우리는 Ref를 이용해서 초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히게 하겠다. UseRef.js import React..

초기 상태 MultiInput.js 추가 import React, {useState} from 'react'; function MultiInput () { const onChange = () => { } const onReset = () => { } return( 초기화 값: 이름(닉네임) ); } export default MultiInput; ➡️두 개의 input이 존재하고, 이름과 닉네임을 입력하면 이름(닉네임)이라는 형식으로 출력이 되도록 구현하기. 📌비 구조화 할당 => 원래 배열을 선언하고 이 배열의 값을 하나하나 변수에 넣어주어야 했다. //배열선언 const animalList = ['CAT', 'DOG', 'TIGER']; //각각 변수담기 const cat = animalList[0]..

InputSample.js 파일 추가 import React from 'react'; function InputSample() { return ( 초기화 값: ); } export default InputSample; ➡️input에 값을 입력하면 그 값이 하단에 나타나게하고, 초기화 버튼을 누르면 input값이 비워지도록 구현하기. 📌e.target.value을 불러오면 input에 담긴 값을 확인 할 수 있다. 📌input의 상태를 업데이트를 할때에는 value값을 필수적으로 지정해줘야한다. InputSample.js import React, {useState} from 'react'; function InputSample() { const [text, setText] = useState(""); c..

➡️ +1, -1 을 수행하는 코드 만들기 시작화면 우선 +1, -1 버튼을 클릭했을때 특정 문구를 뜨게한다. Counter.js import React from 'react'; function Counter() { const onIncrease = () => { SVGAnimatedNumber() } const onDecrease = () => { console.log("-1"); } return( 0 +1 -1 ); } export default Counter; 결과사진 이렇게 버튼이 잘 클릭되는걸 확인할 수 있다. 📌여기서 화살표 함수를 이용하는 방법을 배워볼 수 있다. const 함수명 = (변수) => { return 리턴값; }; 그리고 우리가 하고싶은 동작을 함수로 실현시킨다. 📌컴포넌트에서..

props App.js import React from 'react'; import Hello from './qoffhvjxm/Hello'; import Wrapper from './qoffhvjxm/Wrapper'; function App() { return ( ); } export default App; Hello.js import React from 'react'; function Hello({ color, name, isSpecial }) { return ( { isSpecial ? * : null } 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' } export default Hello; Wrapper.js import React from 're..