안녕하세요! RyuWoong입니다. 제가 근 2년간 React Native를 다뤄왔는데요. React Native를 다루면서 익힌 여러가지 방법이나, 생각 등을 정리해보고자 합니다. React 생태계를 많이 사용하지만, Web과는 다른 부분 때문에 어떻게 처리해야 좋을지 마땅한 자료가 없어 어려움을 겪고 계신 분들이 제 글을 읽으시고 많은 도움이 되셨으면 좋겠네요. Why React Native? 먼저 React Native가 왜 핫한지 설명하자면, 기존에 AOS, iOS, (+ 웹, 데스크탑까지) 각각 다른 언어로 만들고 유지보수 한다는 것은 비용과 생산성 문제가 발생하게 됩니다. 이에 Meta(전 FaceBook)에서 React로 Native앱을 만들 수 있는 프레임워크인 React Native를 개..

계속해서 Hook들을 소개하겠습니다. 이번 글의 주인공은 useRef입니다. 한정적인 용도라 많이 쓰이진 않지만 알아두시면 좋을 Hook 입니다. 🤔useRef? 공식홈페이지에서는 useRef를 이렇게 소개하고 있습니다. useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다. useRef의 선언은 아래와 같이 할 수 있습니다. const refContainer = useRef(initialValue); 이녀석을 어디에, 어떻게 사용할까요? 크게 두 가지의 용도로 나눌 수..

계속해서 React Hooks를 소개해드리겠습니다. 이번에 설명드릴 Hook(이하 훅)은 useEffect입니다. 앞서 소개한 useState만큼, 중요하고 자주 사용하는 훅입니다. useEffect는 일반적으로 컴포넌트가 렌더링 될 때마다 작업을 수행할 수 있게 도움을 주는 훅입니다. 클래스형의 componentDidMount와 componentDidUpdate 기능과 유사한 기능을 제공합니다. 또한 return시 CleanUp을 해주는데 이때는 componentUnMount 기능을 합니다. 한번 자세하게 알아볼까요? 👩‍💻 useEffect? import React, { useState, useEffect } from 'react'; function Example() { const [count, se..

오늘부터 작성할 내용은 React Hook입니다. 클래스형에서 함수형 컴포넌트으로 작성할 것을 권장하면서 등장한 아이들 입니다. 그 중 가장 중요하면서 많이 사용하는 useState에 대해서 알아보고자 합니다. 🤔 useState? state를 만들고 관리하기 위해 도움을 주는 Hook입니다. 로그인 상태를 관리하거나, 아이템들을 관리하는 등의 여러가지 상태를 관리할 수 있습니다. 말보단 직접 보고 만들어 보는게 제일 좋으니 바로 코드를 보시죠! const [state, setState] = useState(defaultState); 위 코드블럭이 useState의 기본 코드입니다. useState는 두 개의 값을 return 해줍니다. 구조분해할당 문법으로 state와 setState에 각각 리턴된 값..

React Hook을 하기 앞서 ES6문법 중 필수적이라고 생각되는 것 몇개만 짚어볼까 합니다. 처음 제가 Hook을 공부할 때 ES6문법이 많이 나와서 엄청 당황했었던 기억이 있습니다! 그 중 꽤 자주 사용하는 문법을 한 번 더 확인해볼까요? ✔ const와 let 기존에 사용하던 var는 함수레벨 스코프(Fucntion-level Scope), var 키워드 생략 허용, 변수 중복 선언 허용, 변수 호이스팅과 같은 단점을 지니고 있는데 특히 Scope(유효 범위)가 넓은 것은 문제를 발생시킬 확률이 큽니다. 이러한 이유들로 const와 let 키워드를 도입하게 됬다고 합니다. 아래 링크에서 더 자세한 내용을 확인해보세요.. let, const | PoiemaWeb ES5까지 변수를 선언할 수 있는 유..