반응형 리액트6 렉시컬환경과 클로저, 그리고 React에서 이전 state를 기억하는 방식 렉시컬환경 렉시컬환경은 실행중인 함수와 코드블록을 포함하는 검색범위인데, 쉽게 이해하려면 코드블록과 연관지어 이해하는 것이 편하다. 변수에 접근할 땐, 내부 렉시컬 환경 -> 외부 렉시컬 환경 -> 외부 2 렉시컬 -> 전역 렉시컬 환경으로 검색범위를 확장한다. 아니면 그냥 스크린샷이라고 생각하자. 리액트 함수 컴포넌트에서의 렉시컬환경과 클로저 클로저 클로저는 '내부함수가 자신이 선언되었을때의 환경 을 기억하는 성질' 라는 글도 있고, 클로저는 '외부 변수를 기억하고 이 외부 젼수에 접근할 수 있는 함수' 라는 글도 있다. 어쨌든, new Function으로 만든 함수를 제외한 모든 JS의 함수는 클로저이다 . 함수는 호출 할 때마다, 새로운 렉시컬 환경이 생성되고 외부 변수는 마지막 접근했던 당시의 렉.. 2023. 12. 16. 리액트 리액트 특징 정리 리액트에서의 데이터는 위에서 아래로만 흐른다. 리액트에서의 데이터 흐름은 트리구조에 의거하여 하향식으로 흐른다. (단방향 흐름이라고도 한다.) 데이터를 전달하는 주체는 부모컴포넌트이다. 부모컴포넌트는 데이터를 props로 자식컴포넌트에게 전달한다. 컴포넌트는 props를 통해 전달받은 데이터의 출처를 알지 못한다. 부모컴포넌트가 자식컴포넌트에게 데이터를 전달하는 '하향식 전달 방식'은 아주 중요하다. 리액트를 대표하는 설명중 하나가 'One way data flow'일 정도이다. State는 최소화할수록 좋다. 또한 모든 데이터를 state로 둘 필요는 없다. 사실 state는 최소화하는 것이 좋다. state 변화가 렌더링을 일으키기 때문이다. state로 저장하지 않아도 되는 것을 .. 2021. 12. 31. geolocation으로 현재위치 받고 카카오 API에 넘겨줘서 주소까지 받아오기 카카오 공식홈페이지를 보고 금방 사용할 수 있을 줄 알았지만 리액트에서 사용하는 예시는 나와있지 않아서 구글의 바다를 오랫동안 헤엄치다 겨우 구현했다. '주소 검색하기' 기능인데, 먼저 Geolocation API를 통해 좌표를 얻어낸 후, axios를 사용하여 url 파라미터에 좌표를 입력한 후 get 요청을 보내면 응답으로 현재 주소를 받는다. Geolocation API 구글크롬에서 다음과 같이 위치 액세스를 허용해야 사용할 수 있다. 사용자의 현재 위치를 지도에 표시하거나 위치 기반 개인화 정보 제공, 웹 앱에서 위치 정보를 가져와야 하는 경우 사용한다. Geolocation API는 navigator.geolocation을 통해 접근한다. 이 때, 사용자의 브라우저는 위치 정보 접근 권한을 요청.. 2021. 11. 14. 컴포넌트 최적화 : React.memo(), useSelector(callback,equalityFn) 새로 알게 된 것 : 컴포넌트 최적화 React.memo 컴퍼넌트가 React.memo()로 래핑될때 React는 컴퍼넌트를 렌더링하고 결과를 메모이징한다. 그 다음 렌더링의 결과가 이전과 같다면 React는 메모이징 이전 내용을 제시한다. 같은 props로 렌더링이 자주 일어나는 컴퍼넌트 에서는 React.memo를 사용하는 것이 더 좋은 성능을 나타낸다.(불필요한 리렌더링을 줄인다.) 다음을 보자. TodoItem 컴퍼넌트를 다음과 같이 정의한다. function TodoItem({ todo, onToggle }){ return ( onToggle(todo.id)} > {todo.text} ); } 위 영상에서 보다시피 기존에 렌더링되어 있던 TodoItem컴퍼넌트들도 계속 렌더링된다. 이번엔 Tod.. 2021. 10. 17. 이전 1 2 다음 반응형
