장담:張談 베풀장의 담론 이야기

우리는 어떤 일을 할 때 과거의 기억을 활용한다. 카메라를 활용할 때에는 카메라에 대한 기억이 단서가 된다.처음 보는 카메라라도, 우리는 카메라에 대한 기억을 통해 하나하나 뜯어보는 대신 뻔한 것들을 건너뛰고 새로운 정보를 이해하고 처리한다. 시스템 역시도 그렇게 반복될 내용들을 기억할 수 있다면 더 빠른 처리가 가능해질 것이다.useMemo는 그러한 캐싱(caching)을 해주는 훅이다. 캐싱이란 과거에 처리했던 데이터를 임시적으로 저장하여 새로운 처리에 활용하도록 하는 것을 의미하는데, useMemo는 이러한 기억의 역할을 한다. 기본적으로 리액트는 어떤 컴포넌트를 호출할 때마다 그 내부에 선언된 기능을 다시 실행하는데, 컴포넌트가 복잡하다면 이는 많은 낭비를 초래한다. 데이터에 변화가 있다면 당연히..

지난 글에서 Props의 역할이 컴포넌트의 속성을 정의하기 위한 것이며, 우리가 많이 사용하는 '하향 데이터 통신' 기능은 결과적으로 속성을 전달하는 과정에서 활용할 수는 있지만, 속성을 전달하는 과정이 하향식으로 이뤄지다보니 그런 식으로도 활용할 수 있게 되는 것이며, 속성의 본연적 기능은 자식 컴포넌트의 정체를 정의하는 것으로 보아야 정확하게 사용할 수 있을 것임을 살펴보았다. 그렇다면 실제로 컴포넌트 간의 통신을 할 때에는 무엇을 사용해야 할까? 여러가지 방법이 있지만, 이번에 다뤄볼 Context API가 그 중 하나가 될 수 있다.API(Application Programming Interface)는 그 용어 자체적으로도 연결의 의미를 지니고 있다. 즉 접면(Interface)으로써 둘 사이를 ..

리액트를 다루면서 처음에 많이 헷갈렸고, 지금도 종종 막히는 부분이 속성(Props) 관련 내용인데, 그리 어렵지 않은 것 같으면서도 막상 뭔가 만들 때에는 의도한대로 작동하지 않아 당황하게 만드는 요인이기 때문이다. 이번 포스팅에서는 이 속성에 대해 완벽히 살펴봄으로써 올바르게 사용해보고자 한다.일단 속성(Props; Properties) 자체는 웹에서 쓰던 형태와 동일하다. 웹에서는 문서의 엘리먼트(Element)의 구체적인 속성을 정의할 때 속성을 활용하는데, 예를 들어LINK위의 예시에서 하이퍼링크 참조(href; hyper reference)가 a 엘리먼트의 속성에 해당한다. 속성은 문서의 마크업 태그 자체가 가지고 있는 성질이며, 해당 성질을 정의해줌으로써 엘리먼트가 그 성질을 갖도록 한다.리..

리액트에서 어떤 값을 선언하고 대응하여 사용할 때에 일반적으로 쓰이는 것은 지난 글에서 다룬 상태(State)값이다. 그런데 상태는 말 그대로 구성요소의 상태에 관계된 값이기 때문에, 상태가 변하면 구성요소 역시 변해야 한다. 즉, 상태의 변화는 구성요소를 다시 로드(렌더)시킨다. 이 동작이 원하는 동작이었다면 관계 없지만, 값이 변하더라도 결합된 구성요소가 바로 다시 렌더링되기를 원하지 않을 수 있다. 이 때 사용할 수 있는 것이 참조(useRef)이다.useRef의 사용법은 아래와 같다:import {useRef} from 'react';const ref = useRef(initialValue);위를 통해 상수 ref는 initialValue라는 초기값을 current로 갖는 객체가 되는데, 따라서 ..

정리함수(clean up)란 말 그대로 기존의 값을 정리하여 다음 기능이 수행될 때 방해가 되지 않도록 하는 함수를 말한다. useEffect 훅의 정리함수에 대해 React에서 설명하는 문서의 문구를 가져오면 아래와 같다.Your setup function may also optionally return a cleanup function. When your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old valu..

지난 글에서 살펴본 useState는 어플리케이션의 상태(State)값을 바꿔 구성요소를 업데이트 하는 훅(hook)*이었는데, useEffect는 반대로 상태에 따라 어떤 특정 동작을 하도록 명령하는 훅이다.import {useEffect} from 'react'; //호출useEffect(function, deps);useState와 마찬가지로 리액트의 내장된 기능이기 때문에 아래와 같이 상단에서 호출(import)만 해주면 쓸수 있으며, 기본적인 사용법은 위와 같이 수행할 기능과 의존성(dependencies)을 입력하면 되는데, 여기서 의존이란 이 useEffect가 수행되기 위한 조건이 되는 상태를 말한다고 보면 된다. 즉 두번째 인자에서 정의된 상태(state)의 변화에 의존하여 기능(func..

리액티브 프레임워크에서 사용하는 특이한 기능 중 하나가 State인데, 처음에 이 개념을 이해하지 못하면 상당히 혼란스러울 수 있다. 특히 웹 개발에서 리액트로 넘어올 경우 동기식 멀티 페이지로 제작되는 기존의 웹에서는 사용할 필요가 없는 개념이기 때문에 더욱 이해가 안 될 수 있는데, 따라서 이를 이해하려면 먼저 리액트의 특징 중 하나인 단일 페이지 어플리케이션에 대해 알아둘 필요가 있다.SPA (Single Page Application)단일 페이지 어플리케이션이란 말 그대로 하나의 페이지에서 움직이는 어플리케이션 개념을 의미하는데, 기존의 어플리케이션이 여러 상황에 맞는 페이지로 구성되고 서버 호출을 통해 다른 페이지 주소로 이동하던(hyperlink) 것과는 다른 방식으로 동작한다. SPA는 처음..

이전에 소개한 바와 같이, 리액트 네이티브는 JSX라는 자바스크립트 언어 기반의 마크업이 결합된 형태의 언어를 사용한다. 이로 인해 리액트 네이티브 개발 시에는 컴포넌트 패턴(Component Pattern)으로 분류되는 디자인 패턴을 주로 사용하게 된다. 컴포넌트 패턴을 이해하기 위해 기존의 모델(Model)-뷰(View)-컨트롤러(Controller)로 대표되는 MVC 패턴과 비교하여 보자면, MVC 패턴은 데이터와 사용자 UI, 그리고 이들을 조작하는 조작부가 각기 분리되어 모듈화 됨으로써 작동하였다. 매우 거칠게 대표적으로 전통적인 웹 개발에서의 사례를 들면, DB-HTML+CSS-JS 와 같은 형태가 이에 해당한다고 할 수 있다.  반면 JS를 기반에 둔 리액트 (네이티브)는 태생적으로 뷰와 컨..

리액트는 JSX라는 언어를 사용하는데, 이는 Javascript XML의 줄임말이다. Javascript 라는 말이 들어가는 것에서 알 수 있듯이 Javascript 언어를 기반으로 하는데, 뒤에 XML(Extensible Markup Language) 이라는 말이 붙는 것에서 이것이 HTML과 같이 마크업으로 쓰이는 언어라는 것을 보여준다. import React from 'React';import {StyleSheet, View} from 'react-native';export default function App () {return ( );}const styles = StyleSheet.create ({ container : { flex: 1, bac..

모든 것을 시작하기에 앞서서, 리액트 네이티브를 이해하기 위한 기본 개념을 알고 넘어가고자 한다. 리액트 네이티브는 '크로스 플랫폼' 타겟의 '스크립트 언어 기반' '모바일 어플리케이션 개발 라이브러리'이다. 이 말부터 한번 이해해보자. 1. 크로스 플랫폼크로스 플랫폼 (Cross Platform)이란 말 그대로, '플랫폼'을 넘나드는 것을 의미한다. 당연히 여기서 말하는 플랫폼이란, 리액트 네이티브가 목표로 하는 모바일 어플리케이션 플랫폼을 의미하고 현 시점에서는 양대 모바일 플랫폼인 AndroidOS 와 iOS를 의미한다. 크로스 플랫폼은 '하이브리드 앱' 이라고도 하는데, 개발된 UI를 브릿지 (Bridge)를 통해 Android와 iOS 각각의 베이스인 네이티브 스레드(Native Thread)와..