Frontend88 [React] Context API란 무엇일까? 1. Context API란 무엇일까 Context API는 React에서 제공하는 내장 API로 전역으로 데이터값을 공유할 수 있게 한다. React에서는 컴포넌트에 props로 데이터를 넘겨줄 수 있는데 만약 부모로부터 자식A > 자식B > 자식C > 자식D 이런 형식의 하위의 한참 하위 컴포넌트에게 props를 전달하고 싶은 경우가 있다고 하자. 그러면 자식D까지 도달하기 위해 지나는 모든 컴포넌트에 일일이 props를 넘겨주는 번거로운 행위를 해야할 것이다. 이런 현상을 dril로 뚫는 것 같다해서 props drilling이라고 하는데, Context API를 사용하면 전역으로 데이터를 공유할 수 있기 때문에 이러한 props drilling을 방지할 수 있는 것이다. Context API를 통.. 2024. 1. 23. [React] useEffect 사용 시 주의할 점 1. useEffect란 React 개발하다보면 안써본 적이 없는 사람이 없을 useEffect에 대해 알아보려고 한다. useEffect란 React에서 기본적으로 제공해주는 hook으로, 함수 컴포넌트에서 부수효과를 처리하기 위해 사용된다. 컴포넌트가 렌더링 될 때마다 어떤 특정한 작업을 할 수 있도록 하는 hook인데 컴포넌트가 mount 됐을 때, unmount 됐을 때, update됐을 때 특정한 작업(부수효과)를 처리할 수가 있다. 클래스형 컴포넌트의 생명주기 메서드를 함수형 컴포넌트에서도 유사하게 사용할 수 있는 hook인 것이다. useEffect도 의존성 배열을 인자로 받는데, 의존성 배열이 빈배열일 경우에는 최초 렌더링 시 한번만 실행이 되고, 의존성 배열에 특정 상태를 넣어주게 되면 .. 2024. 1. 22. [React] useMemo와 useCallback React로 개발하다보면 많이 들어봤을 useMemo와 useCallback은 성능최적화를 위해 사용되는 hook인데, 적재적소에 잘 활용하면 불필요한 리렌더링, 함수 재생성을 방지할 수 있지만 무분별하게 사용한다면 오히려 성능최적화에 방해가 될 수 있다. 그렇다면 useMemo와 useCallback이 무엇이고, 언제 사용해야 하며 언제 사용하면 안되는 걸까? 1. useMemo란? React에서 제공하는 hook 중 하나로 계산비용이 높은 연산결과를 메모이제이션하여, 불필요한 연산을 최소화하는 hook이다. useMemo를 사용해서 결과값을 캐싱하면 렌더링 중에 값이 한번만 계산이 되며 이 후에 렌더링할 경우 의존성배열의 값이 달라지지 않는다면 이 전에 연산했던 값을 그대로 재사용한다. React에.. 2024. 1. 19. [React Native] Expo cli로 App Build 하기 Expo란? Expo는 React Native을 기반으로 더욱 쉽고 빠르게 앱서비스를 개발할 수 있게 도와주는 도구로, 앱개발에 필요한 여러가지 기능 들을 제공하고 있다. 예를 들면 카메라, 위치, 알람 등 다양한 기능을 구현할 때 도움을 주는 API 등이 있다. 만약 React Native 앱을 Expo로 개발했다면 Build 할 때도 Expo에서 제공하는 서비스로 쉽고 간단하게 App을 Build 할 수 있다. Expo로 App을 Build하기 위해서는 우선 expo-cli 를 설치해야 한다. 1) 전역으로 Expo Cli 설치 npm install -g expo-cli Expo Cli 설치가 완료가 되었다면, Expo에서 EAS 즉 Expo Application Services라는 빌드&배포 서비스.. 2024. 1. 18. [React Native] Navigation에 대하여 React Native에서 네비게이션은 앱의 다양한 화면 간의 전환 및 탐색을 관리하는 데 사용되는 것이다. React Native에서는 다양한 네비게이션 라이브러리가 있지만, 가장 널리 사용되는 React Navigation이다. 일반적으로 React에서 사용되는 react-route의 역할을 한다고 보면 된다. React Navigation은 여러가지 내비게이터를 제공하고 있는데 내가 만들어낼 기능의 성격에 따라 맞춰서 사용하면 된다. 1. 여러가지 Navigator 1) Stack Navigator createStackNavigator 함수를 통해 Stack Navigator 생성 Stack이라는 이름으로 알수 있듯, Stack 자료 구조처럼 화면을 쌓아올리는 형식으로 동작하며, 뒤로가기 버튼으.. 2024. 1. 17. [React Native] FlatList와 SectionList의 차이 FlatList와 SectionList 모두 반복되는 비슷한 요소들, 배열의 요소들을 표현하기 위한 컴포넌트이다. 하지만 이름에서 추론할 수 있듯이 FlatList는 단일 배열을 사용하여 목록항목을 표시하고, SectionList는 섹션으로 구분된 데이터를 다룰 때 사용되는데, 그렇기 때문에 섹션은 헤더와 함께 목록 형태로 표시된다. 1. FlatList Component의 특징 가상화된 리스트 아이템을 제공하여 대량의 데이터를 효율적으로 처리할 수 있다. 화면에 표시되는 아이템만 렌더링되기 때문에 성능이 향상되는데, keyExtractor prop을 사용하여 각 아이템에 대해 고유키를 제공할 수 있다. Javascript의 map 과 같은 기능이지만, 여러 유용한 props가 있기 때문에 상황에 따라m.. 2024. 1. 16. 이전 1 2 3 4 5 6 ··· 15 다음
