spread (4) 썸네일형 리스트형 [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지21회차 미션 패스트캠프 프론트앤드 인강 21일차 리액트에서 useRef로 컴포넌트안에 변수만들기와 배열에 항목추가하기를 배웠다. 컴포넌트안에 변수만들기 변수는 예를들어 컴포넌트 내부에 let키워드를 사용해 변수선언한다가정할때리랜더링될때 변수값은 초기화된다. 만약 계속유지하고싶으면 useState를 사용해야하는데 useState같은경우는 상태를 바꾸게되면 컴포넌트가 리랜더랑된다컴포넌트가 리랜더링될때마다 어떠한값을 관리할때도 useRef를 사용한다. useRef로 관리하는 값은 바뀌어도 컴포넌트가 리랜더링되지않는다. 지난번에 사용했던 코드에 고유 id값을 useRef로 관리해보자. App.js import React, {useRef} from 'react'; import './App.css'; // import User.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 14회차 미션 패스트캠퍼스 프론트엔드 인강 14일차 지난시간에 이어 함수인자에서의 spread를 공부하고 scope의 기초를 배웠다. 함수의 인자에서 spread연산자를 이용하는법 먼저 인자와 파라미터의 차이를 알아보자 파라미터는 함수에서 받아오는 값이고 인자는 함수에 넣어주는 값이다. function.substract(x,y){ //파라미터 함수에 들어가는값 return x-y } const result = substract(1,2) //인자:함수에 넣어주는값 console.log(result); ...spread를 활용하면 이렇게 표현할수있다. function.substract(x,y){ return x-y } const numbers = [1,2] const result = substract(...numbers).. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 13회차 미션 패스트캠퍼스 프론트엔드 인강 13일차 지난시간에 이어 spread와 rest의 차이를 알아보고 reduce를 복습하였다. rest는 spread처럼 ...을 사용해 생김새는 비슷하지만 역할이다르다. spread처럼 객체, 배열, 파라미터함수에 사용할수있다. 객체에서의 rest const purpleCuteSlime = { name : '슬라임', attribute:'cute', color:'purple' } //객체 비구조할당 const {color, ...rest} = purpleCuteSlime console.log(color) console.log(rest)//컬러를 제외한 name과 attribute가 들어있다. rest대신에 다른 글자로도 바꿀수있다. ...cuteSlime처럼해도 동일한 결과값.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션 패스트캠퍼스 프론트엔드 인강 12일차 비구조화할당과 spread와 rest를 배워보았다(ES6 javascript의 ... 문법) 비구조화할당(구조분해) destructuring assignment 말이어려운데 쉽게말해 객체나 배열의 원소를 밖으로 꺼내는것을 의미하는 것같다. 객체 비구조화할당 //객체에서의 비구조할당 //만약 f의값이 없다고 가정할때 아래처럼 객체네 f=100이런식으로 넣어줌 const object = {a:1, b:2} const {a, b, f=100} = object console.log(a) console.log(b) console.log(f) //비구조할당은 함수의 파라미터에서도 적용가능 //만약 e의값이 없다고 가정할때 함수안에 e||2또는 아래처럼 객체네 e=3이런식으로 값.. 이전 1 다음
