그로윙맨 그로윙맨

아직 많이 부족하지만 리액트를 배운지 얼마 안됐을때 처음에 useEffect를 접했었다. 당시에 나는 onClilck이벤트 onChange이벤트도 겨우해보던 중이어서 처음 랜더링(mount)이 되었을때 즉 화면이 처음 나왔을때 특별한 이벤트 없이 실행해주기위한 그저 그런 Reacthook이라고 생각했다. 심지어 '사용할 필요가 있을까' 싶기도 했다. 하지만 프로젝트를 진행하면 진행할 수록 쓰임새가 많고 다양하게 활용이 가능한 자연스럽게 접하게되는 훅이었다. 그러다보니 어찌저찌 사용하고는 있지만 그보다는 이해를 하고싶은 생각이들어서 정리를 하게 되었다. 먼저 형태를 알아보자면 useEffect(()=>{ console.log(1) }) 이러한 예를 들어 볼 수 있겠다 이로 인해 컴포넌트가 랜더링되면 개발자..

리액트에 작성하는 코드량이 늘어나게 되면서 랜더링을 적절히 시켜주는 최적화에 대해서 생각하게 되었다. 아직 제대로 적용까진 하지 못하지만 조금 더 깔끔한 코드를 작성하기 위해서 리액트 훅인 useCallbacck과 useMemo에 대해 알아보기로 했다. 하지만 이 두개의 훅을 무조건 적으로 사용하는 것은 오히려 렌더링 시간에 문제를 일으킬 수 있다고 한다. 그 점은 알아두고 살펴보기로 하자. ※REACT의 리렌더링 조건 1. 자신의 state가 변경될 때 2. 부모 컴포넌트로부터 전달받은 props가 변경될 때 3. 부모 컴포넌트가 리렌더링 될 때 ex) APP.js function App() { const [number, setNumber] = useState(0); return( {setNumber(..

저 영상 사이에 미세한 공백이 너무나도 거슬렸는데 .video{ display: block; } //으로 해결~! 비디오 파일에 display: block을 넣어주니 해결되었다.

데이터 바인딩이란? 뷰와 모델에 있는 데이터를 동일하게 만들어주는 것을 의미한다. js에서 데이터 변경을 할 경우 html에서도 변경 양방향 바인딩과 단방향 바인딩 양방향 데이터 바인딩 양방향 데이터 바인딩이란 뷰와 모델의 데이터를 동기화하는 것입니다. 즉 사용자의 입력값에 따라 js의 데이터가 변경되고, js의 데이터가 변경되면 사용자의 화면도 변경됩니다. 장점 * 코드의 양이 줄어듭니다. 데이터가 자동으로 변경되기 때문입니다. 단점 * 변화에 따라 DOM 객체 전체를 렌더링 하거나 데이터를 바꿔 성능이 감소되는 경우가 있습니다. 단방향 데이터 바인딩 단방향 데이터 바인딩이란 한쪽 방향으로만 제어가 가능한 것을 의미합니다. js에서는 사용자의 화면을 변경할 수 있지만, 사용자는 js에 있는 데이터를 자..

배열(Array)이란? 하나의 변수명 아래에 데이터 아이템의 리스트를 저장하는 간편한 방법. 예시 var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; shopping[0] = 'tahini'; shopping; // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ] 유사 배열 객체는 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. JS에서 querySelectorALL이나 document.body.children 유사 배열 객체에 담겨서 온다. 유사배열은 쉽게 말해서 []로 감싸져있지만 배열이 아닌 것! 유사배열 예..