Front-End/React40 React Debounce개념 이전 포스팅에서 Throttle에 대해 알아보았는데, 이번에는 비슷하면서도 약간 다른 Debounce에 대해 알아보자. 구글에 Debounce에 대해 검색하면 아래와 같은 이미지가 나온다. Debounce란 개념은 전자공학에서 나온 개념인데, 예를 들어 리모콘 버튼을 누를 때, 사람 입장에서는 한번만 딸깍 하고 누르는 것 같지만, 내부적으로는 수많은 On / Off 신호들이 발생된다고 한다. 그래서 연속된 신호들이 이어져서 나타났을 때 마지막 신호만을 인정하고 나머지는 무시하는 것을 Debounce라고 한다. React에서도 마찬가지의 개념으로 쓰인다. 이 부분도 잘 정리된 블로그가 있어서, 번역하여 올려둔다. 원본은 아래와 같다. https://www.freecodecamp.org/news/javasc.. 2021. 11. 21. React Throttle 개념 오늘은 스로틀(throttle) 개념에 대해 알아보자. React에서 스로틀이란 어떤 개념을 뜻하는 걸까? 우선 단어의 의미를 살펴보자. Throttle이란? 네이버 사전에서 스로틀에 대한 설명은 아래와 같다. 스로틀 항공우주공학용어사전 1) 엔진의 실린더로 유입되는 연료. 2) 공기의 혼합물을 조절하여 조종사가 원하는 동력 또는 추력을 조절하기 위한 조종장치. 스로틀은 엔진에 연료가 주입되는 양을 조절하는 장치를 의미하는데, React에서는 API request 양을 조절하는 개념으로 사용된다. 이름이 매우 적절하다고 생각... Throttle에 대해 아주 자세하고 친절하게 설명한 블로그가 있어서, 번역을 해보려고 한다. 원본은 아래와 같다. https://dev.to/edefritz/throttle-.. 2021. 11. 21. React Array.prototype.map() React를 공부하다보니 새삼 map매소드의 강력함과 편리함을 느끼게 된다. 처음 map메소드를 배울 때는 왜 개발자들은 이런 요상한걸 만들었을까.. 하고 생각했지만, 학습을 진행하면서 필요성을 절실하게 느끼게 된다. 오늘은 React 실습 중에 "Delete" 버튼 구현에 꽤나 애를 먹었다. 데이터를 컴포넌트끼리 주고받는 것은 이해를 했지만 "Delete" 버튼은 특별히 "어떤" 데이터를 지우고 싶은지 그 정보를 특정할 수 있어야 했는데 아무리 생각해도 방법이 생각나지 않는 것이다. (구글링을 해도 전부 Class props를 이용한 방법들 뿐이었다.) 결국 처음으로 GG를 외치고 Reference 코드를 살펴보니 이럴수가..! map 메소드에는 매핑되는 각 엘리먼트에 인덱스를 부여할 수 있는 방법이 .. 2021. 11. 3. React Props/State 페이스북(이제는 메타구나)의 개발자들이 만든 자바스크립트 오픈라이브러리 React! 간단하고 유지/보수가 편한 컴포넌트 기반으로 SPA를 만들 수 있는 장점 때문에 전세계적으로 이용되는 라이브러리다. 오늘은 React의 핵심 개념 중 하나인 Props와 State에 대해 알아보자 Props React에서 데이터는 위에서 아래로 (Top to Bottom) 흐른다. 즉 데이터를 전달할 때는 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달 해 줄 수 있지만 자식 컴포넌트에서는 부모 컴포넌트로 데이터를 전달 할 수 없다. 또한 부모 컴포넌트로 받은 데이터는 자식 컴포넌트가 수정을 할 수 없다. (Read Only) 이유는, 자식 컴포넌트가 데이터를 수정하면 부모 컴포넌트의 데이터를 참조하고 있는 수많은 다른 .. 2021. 10. 30. 이전 1 2 3 4 다음
