도리쓰에러쓰

ES5 문법에서는 배열 내의 검색을 위한 indexOf() 라는 배열 메소드가 있었는데, ES6 문법에서는 더 강력한 find()와 findIndex() 2개의 배열 메소드를 지원합니다. 지금부터 find()와 findIndex() 메소드에 대해 알아보겠습니다. 1. Array.prototype.find() 주어진 함수의 조건을 만족하는 첫번째 요소 값을 반환합니다. 조건에 맞는 요소가 없다면 undifined를 반환합니다. 1️⃣ 조건에 맞는 요소가 있을 때 let arr = [1, 5, 6, 3, 2]; let even = arr.find((item)=> item % 2 === 0 ); console.log(even);// 6 : item % 2가 0인 요소는 6과 2가 있지만 첫번째 요소 값만 반환..

예시를 위해 Component 3개를 만들어봤습니다. * useEffect() : Component가 로드/재렌더링이 되면 useEffect()가 실행됩니다. function Parent(props) { return ( ) } function Child1(props) { useEffect(()=>{ console.log('렌더링됨1') }); return 1111 } function Child2(props) { useEffect(()=>{ console.log('렌더링됨2') }); return 2222 } 그리고 아래 코드처럼 return() 안에 Component를 넣어 props를 전달합니다. 그럼 콘솔창에 아래 사진과 같이 잘 출력되고 있습니다. 근데 갑자기 여기 전송하고 있는 props를 "존박..

1. lazy loading - React도 Component의 로딩속도 등을 향상시킬 수 있는 방법이 존재합니다. 지금처럼 간단한 사이트 만들 땐 체감이 안되지만 사이트가 크면 클수록 꼭 필요합니다. 1️⃣ 함수나 오브젝트는 변수에 담아쓰는 것이 좋습니다. - 아래 코드처럼 이름 없는 콜백함수나 오브젝트를 작성하지 않고, function Cart() { return ( ) } - 아래 코드처럼 Component 바깥에 있는 변수에 저장해서 사용합시다. let 스타일 = {color : 'red'}; function Cart() { return ( ) } : 왜냐 하면, Component가 재렌더링될 때 변수에 저장되지 않은 이름없는 오브젝트나 함수 류의 자료형들은 매번 새로운 메모리 영역을 할당해줘야하..

💡 2022년 이후 React 18.0ver batching 업데이트 나오면 async 몰라도 됩니다 ! 1. JavaScript의 sync / async 관련 상식 JavaScript는 일반적인 코드를 작성하면 동기(Synchronous) 처리가 됩니다. 동기(Synchronous) 처리는 코드 윗줄부터 차례대로 코드가 실행된다는 뜻입니다. 아래 코드는 콘솔창에 2, 3, 4 순으로 출력되고 있습니다. console.log(1+1);// 2 console.log(1+2);// 3 console.log(1+3);// 4 하지만 JavaScript는 비동기(Asynchronous) 하게 코드 실행이 가능한 함수들이 있습니다. ajax, 이벤트리스너, setTimeout 이런 함수들을 쓸 때 비동기 처리가 ..

1. Component 안에서 쓰는 if-else문 function Component() { if(true) { return true일 때 보이는 HTML; } else { return null; } } 💡 위 코드처럼 쓰려면 else 생략이 가능합니다. function Component() { if(true) { return true일 때 보이는 HTML; } return null; }​ : JavaScript function 안에선 return 이라는 키워드를 만나면 return 밑에 있는 코드는 더 이상 실행되지 않습니다. 2. JSX 안에서 사용하는 삼항연산자 삼항연산자(ternary operator) 형식 조건문 ? 조건문 참일 때 실행할 코드 : 조건문 거짓일 때 실행할 코드 function ..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux5 :: useSelector, useDispatch 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux4 :: dispatch로 데이터 보내기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux3 :: state와 reducer가 더 필요하다면? 저번.. dori-coding.tistory.com 1. 이미지 클릭 시 각각 상세페이지로 이동하기 - 아래 코드는 Card 컴포넌트입니다. function Card(props) { let inventory = useContext(inventoryContext); return( { props.products.title } { props...

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux4 :: dispatch로 데이터 보내기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux3 :: state와 reducer가 더 필요하다면? 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux2 :: reducer / dispatch로 데이터 수.. dori-coding.tistory.com 1. redux를 사용하는 이유 우선 글을 작성하기에 앞서, reducer를 사용하는 이유를 다시 작성하겠습니다. 1️⃣ 모든 Component가 props 없이도 state를 꺼내 사용할 수 있습니다. 2️⃣ state 버그 관리가 용이합니다. state를 수정하려면 수정 방법을 redu..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux3 :: state와 reducer가 더 필요하다면? 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux2 :: reducer / dispatch로 데이터 수정하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux1 :: props 대신 사용하기 저번 게. dori-coding.tistory.com 1. dispatch()로 데이터 수정 요청할 때 데이터 보내기 1️⃣ Cart.js에서 버튼에 dispatch()에 payload 추가하기 dispatch({ type : 'type명', payload : '보낼데이터' }) { props.dispatch({ type : '수량증가'..