이롭게 현명하게

누적 방문자 수 4만 명 돌파! 3만 명 넘은 건 못 봤다🥲 정신 차리고 보니까 3만 명을 넘은 지 한참 되었던 때였다...ㅠㅠ 벌써 4만 명이라니🤭 새해라 새해 다짐으로 열심히 하겠다는 각오로 방문하는 분들이 많은 거 같다. 많은 도움이 되었으면 좋겠다. 다들 파이팅!!🥰 요즘은 강의를 들으면서 게시글을 작성하고 있다. 다만 걱정이라면 게시글을 작성할 생각에 이해를 제대로 하지 않고 작성을 한다는 것이다. 그래서 이해도 제대로 못하고 쫓기듯이 하게 되어 글도 엉망진창이고 순서도 뒤죽박죽이다...😭 다시 초심으로 돌아가서 제대로 작성해 볼 예정이다. 쓸데없는 고민이라면 게시글을 다 지우고 작성을 할지 게시글 내용을 수정할지가 고민이다.🤔 [목표] 초심으로 돌아가서 게시글을 작성하자 T-LOG 목표 달성 ..

목차 useEffect란?import예시 코드정리 [useEffect란?]useEffect는 컴포넌트의 성능을 최적화하기 위해 사용된다.Memo는 memoization를 의미한다. 메모리 넣기라는 의미로 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때 이전에 계산한 값을 재사용하는 것을 말한다.동일한 계산의 반복 수행을 제거하여 프로그램 실행속도를 빠르게 하는 기술이다. [import]import React,{useMemo} from "react"; const 변수명 = useMemo(()=>함수명(),[deps]);첫 번째 파라미터 : 함수 형태두 번째 파라미터 : deps배열을 넣어준다.내용이 바뀌면 : 함수를 호출해서 값을 연산내용이 바뀌지 않으면 : 이전에 연산한 값을 재사용 [예시 코드]im..

목차 useEffect란import예시코드정리 [useEffect란]useEffect는 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) , 언마운트 됐을 때 (사라질 때) , 업데이트될 때 (특정 props가 변경될 때) 특정 작업을 처리하는 방법에 사용한다.마운트 (mount) : 나타나는 것을 의미한다.props로 받은 값을 컴포넌트의 로컬 상태로 설정외부 API 요청( REST API 등)라이브러리(ex. D3, video)를 사용할 때setInterval, setTimeout을 사용할 때언마운트 (unmount) : 컴포넌트가 사라지는 것을 의미한다.뒷정리 함수setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval,claerTimeout)..

목차 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 :..