정승현

* 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 컴포넌트는 노치..