React & React-native (11) 썸네일형 리스트형 < React > React.memo() / useCallback() 이란? / useMemo() vs useCallback() 의 차이 지난 글에서 React.memo( ) 를 사용해도 계속해서 컴포넌트가 재랜더링 될 때에 대해서 해결책을 이야기 해보려고 한다. ( 클로저가 무엇인지 알아야 이해하기 쉽다.) 제목에도 적혀있듯이 바로 useCallback() 을 사용하는 것이다! useCallback( ) 이란? - 컴포넌트 실행 전반에 걸쳐 함수를 저장(메모라이제이션)할 수 있게 해주는 훅 - 리액트에게 내가 어떤 함수를 저장할 것이고, 해당 함수를 재 생성할 필요가 없다고 알려줄 수 있다. - 쉽게 이해하자면 함수가 저장된 메모리 위치 값을 통해 해당 주소에 저장된 함수를 꺼내 비교할 수 있게 해주는 것 같다. ( 원시타입과 참조타입의 차이를 생각해보자 ) 사용하는 방법은 다음과 같다. 이전 글의 참고 const toggleBtnHan.. [ React ] React.memo() / 컴포넌트 재평가와 리랜더링(re-rendering)은 같지않다. / 함수 재평가 막기 리랜더링이 모야? 를 얘기하기 전에 리액트의 동작 방식을 알아야 한다. 리액트는 사용자 인터페이스 구축을 위한 JS 라이브러리이다. 리액트(여기서의 리액트는 리액트 자체! ) 는 브라우저가 동작하는 것과 상관 없으며 리액트는 컴포넌트와 상태객체를 관리하고 다른 객체의 상태와 컴포넌트의 변화를 감지하고 비교하는 라이브러리이다. 모두 알겠지만 간단하게 짚고 넘어가자면 React 는 virtual Dom에 미리 한번 노드들을 비교, 배치 등등 해보고 실제 Dom에 화면을 그려준다. 어? 그럼 두번 그리는거라 비효율적인거 아닌가? 싶겠지만 virtual Dom에서 그려보고 비교하고 등등등 뭘 하는 것들은 메모리 안에서만 이루어 지기때문에 묵직한 real Dom에 실제로 그리는 것과 비용적인 측면에서 비교가 안된.. [ React ] react 생명주기란? - 생명주기 테스트 코드 자... 이어서 생명주기 함수들이 정말 순서대로 작동하는지 알아보기 위해 예시코드를 갖고왔다. 그럼 바로...!!! 컴포넌트 전문 import React from "react"; class LifecycleExample extends React.Component { static getDerivedStateFromProps() { console.log("getDerivedStateFromProps 호출"); return {}; } constructor(props) { super(props); // getDerivedStateFromProps 함수를 사용하므로 // 경고메세지를 건너뛰기 위해 state 초깃값을 설정 this.state = {}; console.log(".. [ React ] react 생명주기란? - 생명주기 함수들 React의 생명주기란 무엇일까? - 일단 리액트는 컴포넌트 기반의 사용자 인터페이스를 구축하는 JAvascript의 라이브러리이다. - 컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(Lifecycle)라고 부르는데 이 생명주기 함수들을 이용하면 특정 시점에 우너하는 동작을 하도록 만들 수 있다. 오.... 구글에서 가져온 그림인데 보기에는 좀 복잡해보이지만 안을 뜯어보면 생각보다 복잡하지 않다. 생명주기를 크게 3가지 과정으로 나눌 수 있는데 자세하게 살펴보자. 먼저 텍스트로 어떤 생명주기 함수가 어떤 과정에 호출되는지 보고 직접 그 순서를 써보면 이해가 훨씬 잘 될 것이다. 1. 생성과정 - 4개의 생명주기 함수 호출 1 - 1. constructor ( props ){ } // 첫 번째로.. <google-map-api> 어플에 지도 띄우기 https://developers.google.com/maps/documentation?_gl=1*avmjmw*_ga*NzEyNTQ1NTkwLjE2NzAzMzA2NjI.*_ga_NRWSTWS78N*MTY3MTExNzI2OS4yLjAuMTY3MTExNzI3My4wLjAuMA.. Google Maps Platform 문서 | Google Developers Google Maps Platform 문서 developers.google.com 이곳으로 접속! 구글아이디와 결제 신용카드를 등록해야한다. 연습용으로는 왠만해서는 결제 될 만큼 안될테니까 걱정말고 하면된다! 일단 maps static api를 선택! 개요를 누르고 api키부분을 선택하면 내가 만들어 두었던 프로젝트를 선택할 수 있다. 그럼 알아서 해당 .. < React-native > / expo-camera보다 가벼운 expo-imagepicker / 핸드폰 카메라 권한 설정하기 / 앨범에 있는 사진 올리기/ 권한 설정 앱의 카메라로 찍은 사진을 사용하고 싶지만, 카메라 자체의 세부적인 설정까지 하기 어려울때!! 기본카메라로 찍은 사진만 사용해도 괜찮을 때 쓰면 간편한 라이브러리를 소개한다. - 설치 환경 : expo * 만약 bare라던가 날것의 react-native라면 추가적인 설정이 필요하다. 공식 문서에 있다 참고 : https://github.com/expo/expo/tree/sdk-47/packages/expo-image-picker 1. 설치 npx expo install expo-image-picker 위의 명령어로 설치를 해준다음 app.json 파일에 설정을 추가로 해줘야한다. { "expo": { "plugins": [ [ "expo-image-picker", { "cameraPermission":.. <React-native> React-native Cli 환경에서 앱 만들기 npx react-native init 프로젝트명 안된다면 npm install -g react-native-cli mac이면 맨 앞에 sudo 붙이기 https://github.com/coreybutler/nvm-windows/releases <React-native> bare workflow 환경에서 앱 만들기 - 1 환경변수 설정에 path에다가 C:\Users\wkdeh\AppData\Local\Android\Sdk\platform-tools 추가해줘야함!!!! sdk 하위폴더에 들어가면 있다. 근데 계속 javahome이 없다고 해서 한참 검색하느라 뒤졌는데 재부팅하니까 됐다ㅎ..... 배포를 위해서 bareworkflow 환경에서 앱을 만들게 되었다. 이전에 expo에서 만든 내 앱이 왜 빌드가 안되었었는지 이제라도 알게되어서 다행이다ㅠ 여튼 bare 를 사용하려면 여러 환경 설정이 필요하다. 나름 자세하게 적는다고 노력했는데 이래저래 검색을 해도 못찾았던 사람들에게 도움이 되었으면 한다. expo-location 관련 공식 깃허브 https://github.com/expo/expo/tree/sdk-47/pac.. 이전 1 2 다음
