본문 바로가기

프레임워크/React

(3)
[React] Props를 통한 부모 컴포넌트에서 값 넘기기 Props는 컴포넌트간에 값을 교환하기 위한 방법 입니다. 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는것이 가장 기본적인 사용 방법으로 컴포넌트를 활용하여 화면을 표현하는 React에서는 아주 중요한 문법중 하나입니다. 일단 이번 포스팅에서는 가장 기본적인 부모 컴포넌트에서 자식 컴포넌트로 값을 넘기는 방법을 알아보겠습니다. 부모 컴포넌트에서 자식 컴포넌트로 값을 넘기는 방법은 클래스형 컴포넌트인가 아니면 함수형 컴포넌트인가에 따라서 여러가지 방식으로 나뉘게 됩니다. 먼저 자식 컴포넌트가 함수형 컴포넌트인 경우에 값을 가져오는 방법을 알아보겠습니다. 함수형 컴포넌트 부모 컴포넌트의 경우에는 함수형이든 클래스형이든 큰 차이가 없어서 부모 컴포넌트는 클래스형 컴포넌트로만 가정 하고 진행하도록 하겠습니다...
[React] 함수형 컴포넌트와 클래스형 컴포넌트 리액트에서 컴포넌트를 선언하는 방식은 두가지가 있습니다. 첫번째는 함수형 컴포넌트 이고, 두번째는 클래스형 컴포넌트 입니다. 함수형 컴포넌트의 형태는 function App() { const test = ""; return {test} } 위와 같고 클래스형 컴포넌트의 형태는 아래와 같습니다. class App extends Component { render(){ const test = ""; return {test}; } } 언뜻 보기에는 둘 사이에는 큰 차이가 없어 보이지만 둘 사이에는 특징 및 몇가지 장단점이 존재하는데 다음과 같습니다. 함수형 컴포넌트 - 클래스형 컴포넌트에 비해 선언하기가 편하다.- 메모리 자원을 클래스형 컴포넌트에 비해서 덜 차지한다.- 빌드 후 배포시에 결과물의 크기가 작다...
React Native 에서 Navigation 사용하기 React Native 공부중에 navigation 내용은 정리 해둘까 싶어서 작성합니다. 네비게이션 테스트 환경 빌드 expo 패키지 매니저 npm yarn 사용할 네비게이션 라이브러리 react-navigation Navigation 이란 거의 대부분의 모바일 앱은 단일 화면으로 구성되지 않습니다. 대체로 모바일 앱 여러개의 화면을 가지고 있기때문에 이러한 화면의 전환을 위해서는 이를 위한 라이브러리가 필요합니다. 사용자가 직접 구현하기 까다롭기 때문에 이를 위해 여러 회사에서 화면 전환을 위한 라이브러리를 만들었는데 오늘은 그 중 react-navigation을 사용해볼 것입니다. react-navigation 사용하기 프로젝트 생성 일단 react native 프로젝트를 새로하나 생성 하겠습니다...