이롭게 현명하게

목차 map 함수를 사용한 배열 항목 수정하기 정리 [ map 함수를 사용한 배열 항목 수정하기 ] 불변성을 지키면서 배열을 업데이트할 때 자바스크립트 배열 내장함수 map 함수를 사용해야 한다. 기존의 map 함수는 배열을 특정 형태를 가진 형태로 변환해 줄 때 사용했다. 특정 객체 배열 컴포넌트 Element 형태로 변환해 줬었는데 배열에 있는 특정 요소만 업데이트할 때도 map 함수를 사용할 수 있다. 더보기 https://devyihyun.tistory.com/144 { const {name,value} = e.target setInputs({ ...inputs, [name]:value }); } const [users,setUsers] =useState([ { id : 1, username : ..

목차 filter를 사용한 배열 항목 제거 요약 리액트 배열에서 특정 아이템을 삭제할 때는 불변성을 지켜가며 업데이트해 줘야 한다. 이때 filter라는 함수를 사용하면 편하다. filter는 배열에서 특정 조건이 만족하는 원소들만 추출하여 새로운 배열을 만든다. 더보기 https://devyihyun.tistory.com/144 삭제 ); } function UserList({users,onRemove}){ return( { users.map( user =>() ) } ); } export default UserList; // CreateUser.js // import React from "react"; function CreateUser({username,email,onChange,onCreate})..

목차 spread 연산자를 사용한 항목 추가 concat을 사용한 항목 추가 리액트에서 배열에 항목을 추가하는 방법은 크게 2가지가 있다. spread 연산자 사용 spread 연산자를 사용하여 기존 배열을 복사한 후 원하는 값을 넣어주는 방법 concat 함수 사용 concat함수를 사용하여 새로운 배열을 만들어 배열의 맨 뒤에 붙여준다. 더보기 https://devyihyun.tistory.com/130 [JavaScript] 자바스크립트 spread와 rest 목차 spread 연산자 rest 함수 파라미터에서의 rest 함수 인자에서의 spread [spread 연산자] spread : 펼치다, 퍼트리다 이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있다. const slime = { name :..

목차 useRef란? import 예시 코드 자바스크립트에서 특정 DOM을 선택해야 할 때 getElementById, querySelector 같은 DOM Selector 함수를 사용해 DOM을 선택했다. 리액트를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야 할 때가 있다. 특정 element의 크기를 가져와야 한다든지, 스크롤바 위치를 가져오거나 설정해야 할 때, 또는 포커스를 설정할 때 등 다양한 상황이 따른다. HTML5 Video 관련 라이브러리(video.js, JWPlayer) 또는 그래프 관련 라이브러리(D3, chart.js) 등 외부 라이브러리를 사용해야 할 때도 특정 DOM에다 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있다. 그럴 때, 리액트에서 ref라는 것을..

목차 배열 렌더링 key의 존재 유무에 따른 업데이트 방식 [배열 렌더링] 다음과 같은 배열이 있다. const users = [ { id: 1, username: 'uni', email: 'uni@gmail.com' }, { id: 2, username: 'dog', email: 'dog@gmail.com' }, { id: 3, username: 'cat', email: 'cat@gmail.com' } ]; 그대로 사용하기 컴포넌트 생성 동적 배열 사용시 map함수 사용 이 배열을 컴포넌트로 렌더링 한다면 어떻게 해야 할까? import React from "react"; function UserList(){ const users =[ { id : 1, username : 'uni', email : '..

목차 input 상태 관리하기 여러 개의 input 상태 관리하기 [input 상태관리하기] 코드를 실행하면 다음과 같은 화면이 나온다. useState와 onChange 이벤트를 사용해 값을 입력하면 하단에 나타나도록 했다. // InputSample.js // import React from "react"; function InputSample(){ return( 초기화 값 어쩌고 저쩌고 ); } export default InputSample; // App.js // import React from "react"; import InputSample from "./InputSample.js"; function App() { return ( ); } export default App; 리액트에서는 in..