당신은 리액트를 쓰면서 useEffect를 얼마나 사용하는가? useEffect는 React 컴포넌트에서 side effect를 처리하는데 너무나도 중요하게 사용되는 훅이다. useEffect에 대해서 알아보려면 side effect에 대한 이야기부터 차근차근 밟아가야 한다. Side Effect란? 간단하게 한국어로 번역하면 부수효과라는 뜻으로 함수나 표현식의 실행 결과 외에 발생하는 영향을 말한다. 우리가 일반적으로 프로그래밍을 할 때에는 함수나 표현식의 결과값을 반환하는 것을 기대한다. 하지만 예상한 결과 값 외에도 외부 상태를 변경하거나 다른 부작용을 발생시키는 경우가 있다. 이런 외부 상태의 변경이나 부작용을 Side Effect라고 부른다. 보통 비동기적으로 처리되는 효과들을 Side Effe..
리액트, 왜 사용하시나요? 최근 기술 면접을 대비하여 준비를 하다 보니, 문득 내가 왜 React를 쓰고, React Native를 쓰는 거지? 생각이 들었다. 내가 React를 사용하는 이유에 대해 나조차 전혀 모르고 있었기 때문에 내가 왜 리액트를 사용해야 하고, 이 라이브러리를 통해 얻을 수 있는 것이 무엇인지에 대해 알아본다. 결론부터 정의 해 보자면, 우리가 HTML, CSS, Javascript로 쌩 코딩하지 않는 이유는 시대의 변화와 흐름 때문이라고 볼 수 있다. 동적으로 사용자 친화적으로 웹 서비스가 변화 하면서 사용자에게 더 좋은 UI와 UX를 제공하기 위해 리액트를 사용하고 있는 것이다. 리액트란? 리액트 왜 사용하는지 결론을 냈으니, 리액트가 무엇인지 알아보자. 먼저 리액트 공식 D..
React가 나오기 전 전통적인 방식은 다음 그림과 같다. url이라고 불리는 단위를 바탕으로 해당 페이지의 html, css, js를 서버에게 url에 해당하는 html을 받아왔다. React로 넘어오면서 url을 받아오는 것이 아니고, 큰 앱 전체를 받아왔다. 각각의 페이지를 요청하는 것이 아닌 전체(Single Page Application)을 받아오는 방식을 사용하기 시작했다. SPA의 라우팅 과정 브라우저에서 최초에 '/'(root) 경로를 요청하면 서버에서 React Web App을 내려준다. 내려 받은 React App에서 '/' 경로에 맞는 컴포넌트를 먼저 보여준다. React App에서 다른 페이지로 이동하는 동작을 수행하게 된다면 새로운 경로의 컴포넌트를 보여준다. React 범주에서 ..
Class Component 작성법 위와 같이 작성하면 Class Component를 사용할 수 있다. Class Component 정의하기 class ClassComponent extends React.Component{ //React안에 Component라는 클래스를 상속 받음 render(){ //render 메서드는 정의 되어야하고 return 값이 꼭 있어야 함 return Hello; } } ClassComponent라는 이름의 클래스 컴포넌트를 React 라이브러리 안에 있는 Component 클래스로부터 상속받았다. Component 클래스 안에는 render() 메서드 값이 필요하며 render 값에는 꼭 return 값이 있어야 한다. Class Component 사용하기 ReactDO..
BootStrap vs React BootStrap 일단 React BootStrap은 BootStrap의 코드를 기초로 개발 되었기 때문에, BootStrap Library를 꼭 가지고 있어야 구동이 가능하다. 일반 BootStrap말고 React-BootStrap, Vue-BootStrap 같이 일반적으로 많이 사용되는 반응형 웹 프레임워크같은 경우엔 본인들만의 BootStrap을 따로 개발하여 사용하고 있다. 일반 부트스트랩을 사용하지 않는 이유는 간단하다. BootStrap 4 기준으로 작성 된 부트스트랩 코드를 살펴보자 import React from 'react'; const ReactWithBootstrap = () => { return ( Email Password Address Addre..
🚀Flutter 개요 Cross Flatform Framework중 현재 가장 인기 있는 프레임워크는 구글에서 개발한 Flutter이다. Cross Flatform Framework란 안드로이드, ios를 하나의 코드베이스로 개발할 수 있는 효율적인 개발 프레임워크인데, 대표적으로 Microsoft의 Xamarin, Meta의 React Native, Google의 Flutter가있다. Flutter React Native Xamarin 회사 Google Facebook (Meta) Microsoft 개발 언어 Dart JavaScript C# 출시 년도 2017 2015 2011 장점 제일 높은 성능, 낮은 진입 장벽, Hot Reload, 수많은 오픈소스 패키지, 한글 및 영어 레퍼런스 JS언어 기반..
