[React Native] 0-2. React Native와 Flutter 중에 무엇을 사용할까?아마 개발을 공부하고 시작하려고 하니 뭘 준비해야할 지 무엇을 공부해야할지 어떻게 공부해야할지 막막해하시는 분이 꽤나 있을 거라 생각합니다. 이런 분들에게 도움이 되셨으면 하는 바람에 작성합니다. React Native를 시작하기 앞서, 아래와 같은 준비과정이 필요합니다.기본적으로 JavaScript를 알아야하며 JSX 작성하기 위해서는 HTML과 CSS의 기본적인 이해를 필요로 합니다. HTML과 CSS는 좋은 자료와 글이 많기에 유튜브나 구글을 통해 검색하시면 쉽게 익히실 수 있을 거라 생각합니다.Javascript부터 중요한데, 저는 아래와 같은 사이트들을 추천합니다. https://developer.m..

안녕하세요. RyuWoong 입니다. 이번에 말씀 드릴 이야기는! Component 모듈화하기입니다. React App을 만들다보면, View와 Logic이 혼재되어 복잡해 보이는 문제가 발생합니다. 이를 기존에 있던 디자인 패턴이나, Hook 등을 이용하여 관심사를 분리하고, 더 가독성 좋고, 유지보수가 용이하게 할 수 있습니다! 많은 프론트 개발자들이 이러한 고민은 다 거쳐가시는것 같네요. 한번 알아볼까요? 아래 이야기는 여러 내용을 찾아보고 나름대로 이해하여 적용한 것으로 틀린게 있을 수 있습니다. 부족한게 있으면 댓글로 알려주세요! 발단. React던 React Native던 규모가 커지면 커질수록 하나의 컴포넌트가 점점 비대해지고 분리하자니 Props Drilling Depth가 깊어지는 등의 ..

계속해서 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를 제대로 시작해보겠습니다. 자, 새로운 리액트 프로젝트를 만들어봅시다. 이전에 Ready to React .00 에서 만든 프로젝트를 사용하셔도 좋고 한 번 더 따라하셔서 새로 만드셔도 좋습니다. React 파헤치기🤩 src/App.js 파일을 열어볼까요? //src/App.js import logo from './logo.svg'; import './App.css'; function App() { return ( 내에 index.js를 통해 연결되어 App.js가 들어가게 되는겁니다. 그 덕에 우리는 App.js 안에 컴포넌트를 추가하여 작성하면서 만들면 쉽게 React 어플리케이션을 만들 수 있습니다. React.StrictMode는 뭔가요? ❗️ 공식 홈페이지에 설명이 잘 나..