📜 Webview PostMessage 회사에서 앱을 개발할 때 React-Native webview로 React 프로젝트를 씌워서 앱 등록을 하였다. 그때 RN -> React 또는 React -> RN 으로 데이터를 전달해야하는 일이 생긴다. (앱을 켰을 때 os확인을 하거나, 접속 위치를 확인해 react에서 사용할 경우 등) 그 당시 사용했던 방법을 기록해 놓으려고 한다. 🔍 React-Native Webview 옵션 세팅 React-Native webview 작업 시 onMessage 속성에 react에서 보내는 데이터를 받을 때 사용할 함수를 적는다. const webview = useRef(); { web_to_native(e) }} source={{ uri: uri, }} /> 🔍 Reac..
현재 진행 중인 개발동아리에서 앱을 만들기로 하였다. 근데 우리는 앱개발자가 없는걸..? 그래서 react-native 를 이용해 웹뷰를 만들어 모바일 웹에 씌우기로 하였다. 이를 하이브리드앱이라고 한다. react-native-webview 를 개발하는 과정에서 엄청난 오류와 시간이 걸렸기 때문에 다음에 작업할 때 이를 방지하기 위해 기록하려고 한다. 처음에 expo를 사용하여 작업을 했지만 알 수 없는 오류들을 해결하는데 시간이 더 걸릴 것 같아서 다 지우고 react-native-cli 로 환경 설정을 진행했다. 나는 mac을 사용하고 있기 때문에 mac os 기준으로 작업하였다. 1. Homebrew 설치 Homebrew 는 mac용 패키지 관리자이다. 아래 명령어로 설치하면 된다. $ /bin/..
📝 Routing 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다. 웹 애플리케이션을 만들 때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수 있습니다. 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템 입니다. 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 선택지는 크게 두 가지가 있습니다. React-Router 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용하고 있습니다. 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다. Next.js 리액트 프로젝트의 프레임워크입니다. ..
📝 useState 리액트 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 사용자 인터렉션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요합니다. useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 📜 useState 활용 import { useState } from 'react'; const Counter = () => { let [count, setCount] = useState(0); return( { count } {setCount(count + 1)}}>+1 {setCount(count - 1)}}>-1 ) }; export default Counter; useState는 상단에 import 구문을 ..
📝 모든 React Component에는 Lifecycle(수명 주기)이 존재합니다. Component의 수명은 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 라이프 사이클 메서드의 종류는 총 아홉 가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프 사이클은 총 세가지, Mount, Update, Unmount 로 나눕니다. 📜 Mount DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(Mount)라고 합니다. 이때 호출하는 메서드는 다음과 같습니다. constructor ..
📝 ref HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 React프로젝트 내부에서 DOM에 이름을 다는 방법이 ref(reference) 개념입니다. 🔎 함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 하기 때문에 Class형 컴포넌트 먼저 알아보겠습니다. 📜 ref는 어떤 상황에서 사용해야 할까 React에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야 할 때 사용하게 됩니다. ex) 특정 input에 focus주기, scroll box 조작, canvas 요소에 그림 그리기 등 📜 Class형 컴포넌트 - 콜백 함수를 통한 ref 설정하기 ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것입니다. ref를 달고자 하는 요소에 ref라는 콜백 함수를..
📝 state state는 Component 내부에서 바뀔 수 있는 값을 의미합니다. props는 Component가 사용되는 과정에서 부모Component가 설정하는 값이며, component 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. props를 바꾸려면 부모 Componenet에서 바꾸어 주어야합니다. React에는 두 가지 state가 있습니다. 하나는 class형 Component가 지니고 있는 state이고, 다른 하나는 함수형 Component가 지니고 있는 useState라는 함수를 통해 사용하는 state입니다. 📜 class형 Component의 state - Component에 state를 설정할 때는 constructor 메서드를 작성하여 설정합니다. constu..
📝 Props props는 properties의 줄인 표현으로 Component 속성을 설정할 때 사용하는 요소 입니다. props 값은 해당 Component를 불러와 사용하는 부모 Component에서 설정할 수 있습니다. 📜 JSX 내부에서 props 렌더링 props 값은 Component 함수의 파라미터로 받아 와서 사용할 수 있습니다. props를 렌더링할 때는 JSX내부에서 { } 기호로 감싸주면 됩니다. const MyComponent = props => { return Hi, My name is { props.name }!!; }; export default MyComopnent; 📜 Component 사용할 때 pops 값 지정 불러온 Component 내부에 props 값을 지정할 수..
