정승현

* Context API Context API 를 활용하면 props를 일일히 자식 컴포넌트로 전달하지 않아도 원하는 곳에서 데이터를 전달받고 이용할 수 있다. 앞서 살펴보았던, Theme Provider 와 흔히 많이 사용하는 Redux 가 Context API 를 사용한 예시이다. Context API를 활용할 때 가장 먼저 호출하는 함수는 createContext 이다. 아래와 같이 사용하며, 이름 그대로 Context를 생성하는 함수로, 파라미터에 기본값을 전달할 수 있다. 이 기본값은, 적절한 Provider Component 를 찾지 못했을 때 사용하는 값이 되며, Context API를 이용해서 자식 컴포넌트로 전달하는 데이터에는 단순히 값 뿐만이 아닌 함수도 전달할 수 있다는 특징이 있다...

* Hooks Hooks 는 기존의 클래스 컴포넌트에서 할 수 있었던 기능을 함수 컴포넌트에서 할 수 있도록 도와준다. 그림을 보고 이해해보면, 클래스 컴포넌트에서는 아래 그림과 같이 다양한 라이프 사이클 메소드들을 제공하는데 그 중, 컴포넌트가 처음 렌더링 될 때 호출되는 componentDidMount, 컴포넌트가 갱신되었을 때 호출되는 componentDidUpdate, 컴포넌트가 마운트 해제 될 때 호출되는 componentWillUnmount 가 있다. Hooks는 이 라이프 사이클 메소드들을 함수 컴포넌트에서 처리할 수 있도록 도와주는 것이다. * useEffect Hooks useEffect는 컴포넌트가 렌더링 될 때마다 원하는 작업을 실행할 수 있도록 하는 기능이다. useEffect의 파..

자세한 코드는 GitHub 링크를 따라가시면 확인하실 수 있습니다 ! ( https://github.com/SeungHyeonJung97/RNStudy) 이번 예제에서는, Styled-Components 와 prop 을 사용할 것이기 때문에, 프로젝트를 생성한 후 npm i styled-components prop-types 명령어를 통해 라이브러리를 설치해주자. * 노치 디자인 제거 ( SafeAreaView ) 노치 디자인을 사용하는 기기의 경우, 최상단에 컴포넌트를 배치했을 경우 컴포넌트가 노치 디자인에 가려지는 것을 확인할 수 있을 것이다. 그래서 이를 방지하기 위해서는, React Native에서 제공하는 SafeAreaView 컴포넌트를 사용할 수 있다. SafeAreaView 컴포넌트는 노치..

* FlexBox FlexBox는 컨테이너 안의 요소간 공간 배분과 정렬 기능을 제공하는 레이아웃 모델이다. 어플을 개발할 때, 핸드폰 기기마다 기기의 너비와 높이가 다르고, 그럼 그에 따라 레이아웃을 지정해주기도 참 어렵다는 것을 느낄텐데, flex를 이용하면 이 문제를 해결할 수 있다. Flex는 너비와 높이를 지정하지 않고, 비율로 차지할 공간을 설정한다. 아래와 같이 Flex를 사용하기 위한 컴포넌트를 생성한 뒤, Flex를 사용해보자 import React from 'react'; import { View } from 'react-native'; const Box = ({ style }) => { return ; }; export default Box; export default function..

* Props & State Props : 외부(부모)에서 자식에게 전달하며, 수정이 불가능하여 수정을 하고 싶다면, 부모에게 요청을 해야한다. export default function App() { return ( ); } const MyButton = props => { console.log(props); return ( alert('MyButton')} hitSlop={{ bottom: 10, top: 10, left: 10, right: 10 }} pressRetentionOffset={{ bottom: 10, top: 10, left: 10, right: 10 }} > My Button ); }; MyButton에서 title이라는 값을 생성해 넘겨주게 되면, 부모 컴포넌트에서 생성된 데이터 ..

* JSX JSX는 JavaScript + XML을 의미하며, 객체 생성과 함수 호출을 위한 문법적 편의를 위해 만들어진 확장 기능이다. 가독성이 높고, 작성하기 쉽다는 장점을 가지고 있다. React Native에서 프로젝트를 처음 생성하면, 보이는 화면에서 JSX문법을 확인할 수 있다. * JSX 문법 JSX는 반드시 하나의 부모로 감싸진 상태로 반환되어야 한다. 위 코드에서 볼 수 있듯이, 는 라는 부모로 감싸져 있는데, 이 때 컨테이너가 없는 상태로 와 만 반환되도록 한다면 에러가 발생한다. 만약, 처럼 무언가 역할을 하는 부모로 감싸지 않고, 두 개 혹은 그 이상을 반환하고 싶다면 태그를 이용할 수 있고, 이 때 Fragment는 아래 그림처럼 단축 문법을 제공한다. React Native에서는..