screen 앱의 각 구성 요소는 navigation에서 자동으로 props와 함께 제공된다.navigationnavigate : 다른 화면으로 이동하여 수행해야 하는 작업을 파악한다.reset : 네이게이터 상태를 지우고 새 경로로 교체goBack : 활성 화면을 닫
React Navigation react-navigation는 화면을 설정할 수 있는 독립 실행형 라이브러리이다. 설치 방법은 아래와 같다. iOS의 경우 Cocoapods가 설치되어있는지 확인하고 설치를 완료한다. 전체 앱을 NavigationContainer로
useMutation은 React Query를 이용해 서버에 데이터 변경 잡업을 요청할 때 사용한다.데이터베이스로 비유하자면 insert, update, delete가 모두 포함된다.mutationFunction 은 Promise 처리가 이루어지는 함수이다.fetch
useQuery는 React Query를 이용해서 서버로부터 데이터를 조회해올 때 사용한다.💡 데이터 조회가 아닌 데이터 변경 작업은 useMutation을 사용한다.DB로 비유를 하자면 SELECT를 할 때 사용된다고도 할수있다.useQeury를 코드로 작성하여 구
useReducer는 useState와 유사하다. 복잡한 논리에 의존하는 여러 상태를 추적하는 경우 useReducer를 사용 할 수 있다.useReducer(reducer, initialState);reducer 함수는 사용자 정의 상태 논리를 initialState
메모이제이션된 콜백을 반환한다.인라인 콜백과 그것의 의존성 값의 배열을 전달한다. useCallback은 콜백의 메모이제이션된 버전을 반환한다. 그 메모이제이션된 버전은 콜백의 의존성이 변경될 때에만 변경이된다. 불필요한 렌더링을 방지하기 위해(shouldCompone
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), a, b);메모이제이션 된 값을 반환한다."생성(create)" 함수와 그것의 의존성 값의 배열을 전달한다. useMemo는 의존성이 변경되었을 때에만
클로저 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야한다. Lexical scoping init()은 지역 변수 name과 함수 display
스코프(Scope)라는 단어 자체는 '범위'라는 의미를 가짐Javascript에만 국한된 개념은 아니다.스코프의 정의는 "식별자 접근 규칙에 따른 유효 범위"이다.식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다.범위는 블록(중괄호) 또는 함수에 의해 나
React Context는 상태를 전역으로 관리하는 방법이다.Hook과 함께 사용하면 단독으로 useState를 사용하는 것 보다 더 쉽게 중첩된 구성 요소(컴포넌트) 간에 상태를 공유 할 수 있다.상태는 상태에 대한 액세스가 필요한 스택에서 가장 높은 상위 구성 요소
useRef Hook을 사용하면 렌더 간에 값을 유지할 수 있다.업데이트할 때 다시 렌더링하지 않는 변경 가능한 값을 저장하는데 사용할 수 있다.DOM 요소에 직접 액세스하는 데 사용할 수 있다.Hook을 사용하여 애플리케이션이 몇 번 렌더링 되는지 계산하려고 하면 u
useEffect Hook을 사용하면 구성 요소에서 부작용을 수행할 수 있다.부작용의 몇 가지 예는 데이터 가져오기, DOM 직접 업데이트 및 타이머이다.useEffect는 두 개의 인수를 허용한다.useEffect(function, dependency)useEffec
함수 구성 요소의 상ㅇ태를 추적할 수 있다.상태는 일반적으로 애플리케이션에서 추적해야 하는 데이터 또는 속성을 나타낸다.함수 구성 요소를 호출하여 상태를 초기화 한다.초기 상태를 받아들이고 두 개의 값을 반환한다.현재상태상태를 업데이트하는 함수첫 번째 값 color는
애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다.상태를 변화시키는 유일한 방법은 액션 객체를 전달하는 방법뿐이다.이를 통해서 뷰나 네트워크 콜백에서 결코 상태를 직접 바꾸지 못 한다는 것을 보장할 수 있다. 모든 상태 변화는 중앙에서 관
제작코드 (원격에서 스크립트를 불러우는 것 같은 시간이 걸리는일)와 소비코드 (제작코드의 결과를 기다렸다가 이를 소비한다. 이때 소비 주체(함수)는 여럿이 될 수 있다.)를 연결해주는 특별한 자바스크립트 객체이다.new Promise에 전달되는 함수는 executor(
비동기 요청의 데이터 무결함에 대한 책임을 개발자가 아니라 React 앱 자체가 책임지게 하는 라이브러리비동기 요청의 무결함 : 비동기 요청 데이터가 view에서 필요할 때, 그 전에 비동기 요청이 동작하여 데이터를 참조할 수 있는 상황을 만든다.과정이 아닌 결과의 무