안녕하세요! RyuWoong입니다. 곧 설날인데, 새해는 잘 맞이 하셨나요? 저도 어울리는 사람이 되기 위해 노력중에 있습니다! 이번에는 Next.js 를 공부중인데 정리해서 가져왔습니다. 추가로 Canvas도 공부중이고 알고리즘과 자료구조도 함께 다시 공부 중입니다. 꽤 많은 글이 자주 포스팅 될 것 같네요. : ) 그럼 Next.js 한번 해볼까요? Next.js? React를 좀 더 편하고, 더 사용성 좋게 해주는 Framework 입니다! 등장배경은 React는 SPA(Single Page Application) 형태로 제작되는데 이는 SEO(Searh Engine Optimization)에서 매우 불리합니다. 또한 첫 접속 시 구동을 위해 필요한 모든 파일을 내려 받는 구조로 파일을 내려 받는 ..

안녕하세요! RyuWoong입니다. 포스팅이 조금 늦어졌습니다! 원래 Navigation을 포스팅하려다가 생각해보니까 기본적인 Component 이야기를 해야할 것 같아서, 새롭게 작성한다고 그만..! 그럼 본론으로 들어가도록 하죠. React Native(이하 RN)에서 View를 구성할 땐 Web과 다른 독자적인 Component를 사용합니다. 자! 그럼 어떤 Component들이 있는지 살펴 볼까요? 공식문서 내 여기서🙋 볼 수 있습니다. 깨알 같은 Tip도 많으니 도움이 됐으면 좋겠습니다. Components ActivityIndicator 로딩 시 빙글빙글 돌아가는 애니메이션을 보신 적 있을 겁니다. 그것을 만드는 컴포넌트입니다. 자주 보시죠? Button 버튼입니다. 하지만 실질적으로 거의 사..

계속해서 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에 각각 리턴된 값..