리액트 네이티브 앱 개발 환경 준비(macOS) | expo 안녕하세요. 오늘은 리액트 네이티브 프로젝트 생성해보겠습니다. 우선, 프로젝트 생성 전에 개발 환경 준비부터 해보겠습니다. 1. 왓치맨 설치 왓치맨은 페이스북에서 제작한 파일 시스템 변경 감지 도구로, 파일의 변화를 감지하고 파일의 변화가 조건을 만족시키면 특정 동작을 실행시킵니다. 리액트 네이티브에서 왓치맨은 소스코드의 변화를 감지하고 자동으로 빌드하여 화면에 업로드하는 역할을 담당합니다. 왓치맨은 홈브류를 이용해서 설치합니다. $ brew install watchman 2. Node.js 설치 Node.js 설치를 해보겠습니다. Node.js를 설치하면 노드 패키지 매니저인 npm(Node Package Manager)도 함께 설치되는데, npm을 통해 다양한 패키지를 설치하고 사용할 수 있습니다. .. [react-native] Tab Navigation 이 글은 를 읽고 이해한 바를 바탕으로 작성되었습니다. GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. . Contribute to Alchemist85K/my-first-react-native development by creating an account on GitHub. github.com 💡 탭 내비게이션 탭 내비게이션은 보통 화면 위나 아래에 위치해서 탭 버튼을 누르면 버튼과 연결된 화면으로 이동하는 방식으로 동작한다. 카카오톡, 인스타그램, 유튜브 등 많은 앱들이 탭 내비게이션을 사용하고 있다. ✔️ 탭 내비게이션을 사용하기 위한 추가 라이브.. [react-native] Stack Navigation 이 글은 를 읽고 이해한 바를 바탕으로 작성한 글입니다. GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. . Contribute to Alchemist85K/my-first-react-native development by creating an account on GitHub. github.com 내비게이션을 만드는 방법은 책에서 설명하는 React Navigation Library를 이용하는 방법 말고도 React Native Navigation Library를 사용하는 방법도 있다. 우선 책에서는 React Navigation Library를 사용하.. [react-native] Context API 이 글은 를 읽고 이해한 바를 바탕으로 작성되었습니다. GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. . Contribute to Alchemist85K/my-first-react-native development by creating an account on GitHub. github.com + 참고) react docs - context Context – React A JavaScript library for building user interfaces reactjs.org ✔️ 예시 코드 const Context = createContext(de.. [react-native] Hooks(4) useMemo 이 글은 를 읽고 이해한 바를 바탕으로 작성되었습니다. GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. . Contribute to Alchemist85K/my-first-react-native development by creating an account on GitHub. github.com 💡useMemo useMemo는 동일한 연산의 반복 수행을 제거해서 성능을 최적화하는데 사용된다. useEffect와 똑같이, 첫 번째 파라미터에는 조건 만족 시, 실행 될 함수를 작성하고, 두 번째 파라미터에는 함수가 실행될 조건을 배열로 전달한다. 배열 안에.. [react-native] Hooks(3) useRef 이 글은 를 읽고 이해한 바를 바탕으로 작성되었습니다. GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. . Contribute to Alchemist85K/my-first-react-native development by creating an account on GitHub. github.com 💡useRef useRef는 특정 컴포넌트를 선택할 때 사용하는 hooks 함수이다. const ref = useRef(initialValue); useRef를 사용할 때 주의해야 할 점은 컴포넌트의 ref로 지정하면 생성된 변수에 값이 저장되는 것이 아니라, .. [react-native] Hooks(2) useEffect 이 글은 를 읽고 이해한 바를 바탕으로 작성되었습니다. GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. . Contribute to Alchemist85K/my-first-react-native development by creating an account on GitHub. github.com 💡useEffect useEffect는 컴포넌트가 렌더링될 때마다 원하는 작업이 실행되도록 설정하는 기능이다. useEffect(() => {}, []); 첫번째 인자로 전달된 함수는 조건을 만족할 때마다 호출되고, 두번째 인자로 전달되는 배열로 그 조건을 작성.. [react-native] Hooks(1) useState 이 글은 를 읽고 이해한 바를 내용으로 작성되었습니다. GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. . Contribute to Alchemist85K/my-first-react-native development by creating an account on GitHub. github.com 💡Hooks? 이전에는 컴포넌트의 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행하려면 클래스형 컴포넌트를 사용해야 했지만, Hooks를 이용하면 함수형 컴포넌트에서도 상태를 관리할 수 있고 생명주기에 맞춰 특정 작업을 수행할 수 있다. 💡useState .. [react-native] styled-component를 import하는데 오류가 난다면? import styled from 'styled-components/native' ... 코드 잘 써놓고, 안드로이드 에뮬레이터에서 돌렸더니 저런 오류가 뜬다. terminal에서는 import 하는 부분에서 error가 난다고 뜬다. 그래서 우선, npm으로 설치해놓은 styled-components에 관한 모든 것을 삭제하고, 다시 재설치 하였다. npm uninstall styled-components rm -rf node_modules && npm install npm install --save styled-components 여기까지 하고 다시 돌렸더니 이렇게 파란색 화면에 expo sdk 버전이 안맞는다고 떠서 https://blog.expo.dev/expo-sdk-42-579aee2348b6.. [react-native] 스타일드 컴포넌트 styled-component 이 글은 를 읽고 이해한 바를 바탕으로 작성되었습니다. https://github.com/Alchemist85K/my-first-react-native GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. . Contribute to Alchemist85K/my-first-react-native development by creating an account on GitHub. github.com 리액트 네이티브에서 컴포넌트에 스타일을 적용하는 방법은 css와 유사한 부분이 많았다. 하지만,, 유사한 거지 똑같은 건 아니다. css에서는 하이픈(-)을 사용하지.. [react native] Props 완벽 정리 이 글은 를 읽고 이해한 바를 바탕으로 작성되었습니다. https://github.com/Alchemist85K/my-first-react-native GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. . Contribute to Alchemist85K/my-first-react-native development by creating an account on GitHub. github.com 리액트 네이티브에서 가장 기본중의 기본이 되는 구성요소인 Component는 데이터와 UI 구성요소의 집합체로 볼 수 있다. UI는 보여지는 생김새(?)에 해당하고,.. [react native] 컴포넌트 만들기 이 글은 를 읽고 이해한 바를 바탕으로 작성되었습니다. https://github.com/Alchemist85K/my-first-react-native GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다. . Contribute to Alchemist85K/my-first-react-native development by creating an account on GitHub. github.com 💡 컴포넌트란? Components 컴포넌트components란 재사용이 가능한 조립 블록으로 화면에 나타나는 UI 요소이다. https://reactnative.d.. 이전 1 2 다음
