상상을 현실로 상상을 현실로

로그인 화면 같은 경우 여러 개의 TextInput이 있고, 키보드의 focu를 다음 TextInpu으로 넘겨 바로 값을 입력받고 싶을 때 사용한다. 즉, 여러개의 값을 연속으로 받고 싶을 때 기능을 구현한다. useRef useRef를 사용하여, 특정 component를 가리킬 수 있습니다. useRef 특징 component 속성에 Ref를 지정하고 사용해야 한다. ref변수를 바로 사용할 수 없다. current property를 사용해야 한다. 변경되어도 component가 다시 랜더링 되지 않는다. 컴포넌트의 속성만 조회&수정을 한다. const refInput = useRef(null); // useRef를 통해 refInput을 먼저 만든다. // component에 ref속성으로 지정해준다..

1. 리액트에서 라이프 사이클 이란? 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 언어이다. 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링 되기 전 준비 과정에서 시작해서 페이지에서 사라질 때 끝이 난다. 2. 라이프 사이클의 유형 라이플 사이클은 크게 3가지 유형으로 나눌 수 있는데 생성이 될 때, 업데이트할 때, 제거할 때이다. 리액트에서는 이러한 작업을 Mount, Update, Unmount라고 한다. Mount는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻한다. Unmount는 DOM에서 제거되는 것을 뜻한다. Update는 다음과 같은 4가지 상황에서 발생한다. Props가 바뀔 때 State가 바뀔 때..

1. 리액트 네이브 란? (React Native) 리액트 네이티브는 'iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크' 입니다. 페이스북의 자바스크립트 라이브러리인 리액트에 기반을 두고 있으며, 모바일 플랫폼이 타깃입니다. 즉, 웹 개발자가 익숙한 자바스크립트를 활용하여 네이티브 모바일 앱을 만들 수 있습니다. 게다가 작성한 코드 대부분을 플랫폼 간에 공유할 수 있어서 리액트 네이티브를 이용하면 iOS와 Aanroid 앱을 동시에 개발할 수 있습니다. 2. 크로스 플랫폼 앱 개발 프레임워크 비교 Flutter : Flutter는 간단하면서도 지속적인 크로스 플랫폼 앱 개발을 가능하게 하며 최근 급상하고 있다. 주로 배우기 쉬운 반응형 객체 지향 언어인 Dart를 기반..

React에서 컴포넌트를 작성하는 방법은 클래스형(Class Component)과 함수형(Function Component) 두 가지 방법이 있다. 현재는 함수형 방식으로 구현을 많이한다. 하지만 클래스형 방식으로 구현이 된 프로젝트가 많기 때문에 클래스형 방식도 배워야 한다. 1. 선언 - 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const name = 'react native'; return {name} } } export default App; class 키워드 사용 Component 상속 render() 메서드가 반드시 있어야 함 - 함수형 컴포넌트 import React fr..