안녕하세요

페이지 앞뒤로 이동하려면 navigate(1), navigate(-1) 여러 여러 유사한 페이지 만들 때 Nested Routes: 존재하지 않는 모든 Route에 404 페이지 출력 배포할 때 기본 주소는 basename={process.env.PUBLIC_URL} 데이터 props로 전달할 때 헷갈리게 하지 말자 styled-components 장점 styled-components 단점 params와 일치하는 id 가진 상품 찾기 Array.find(): 컴포넌트의 lifecycle useEffect 사용하는 방법 useEffect에도 return을 쓸 수 있다 dependency 역할 useEffect는 여러개 사용 가능하다 css className으로 트랜지션 주기 리액트 automatic bat..

배열 스프레드 연산자로 생성하는 이유 컴포넌트는 언제 만들면 좋은가 Array.map() 메서드에서 바로 return을 주면 동적인 UI 만드는 순서 html에서 나타나지 않게 하려면 null을 사용한다. component를 여러개 생성하지 않고 배경 색상만 다르게 변경하기 배열 스프레드 연산자로 생성하는 이유 const manToWoman = (index, setPostTitle, originalData) => { 배열을 스프레드 연산자(...)로 새롭게 생성하지 않고 그대로 복사를 하게 되면 완전하게 같은 배열이 된다. 때문에 state자체가 변한 것을 인지하지 못한다. 따라서 스프레드 연산자를 이용한다. let temp = [...originalData]; temp[index] = "바뀐 제목"; ..

파라미터 defalut값 지정하기 아무런 파라미터를 주지 않았을 경우 자동으로 할당된다. const 출력 = (a=1, b=2) {console.log(a,b} const 출력 = (a=1, b=a+1) {console.log(a,b} // 연산자와 const 출력 = (a=1, b=함수()) {console.log(a,b} // 함수도 dafulat로 할당이 가능 arguments: 파라미터 전부를 배열에 담은 특별한 변수 (실제로 쓰지는 않을 듯) const 함수 = (a,b,c,d) => { return arguments.reduce( el => el ) } // a+b+c+d를 반환합니다. arguments에서 개선된 기능의 es6의 rest 문법 const 함수 = (a,b,...rest) =>..

스프레드 연산자는 배열만이 아니라 문자열에도 적용 const word = apple console.log(...word) // a p p l e 깊은 복사 reference data type (array, object) 배열을 변수에 할당하게되면 deep copy 가 일어나서 값을 공유하게 됩니다. const a = [1,2]; const b = a a[2]= 3 console.log(a) // [1,2,3] console.log(b) // [1,2,3]