끄적끄적

앞서 Class편에서처럼 React는 생명주기를 갖습니다. 생명주기를 쉽게 표현하면 화면이 처음에 생성 될때나, 중간에 화면의 내용이 바뀌거나, 화면이 전환되어 소멸될 때 일어나는 과정들이라고 이해하면 좋을 것 같습니다. Hooks에서는 useEffect를 통해서 생명주기를 관리할 수 있습니다. 기존에 클래스형과 함수형의 차이였던 부분으로 알고 있는데 Hooks에서 더욱 간단하게 생명주기를 관리할 수 있으니 사람들이 왜 Hooks를 이용하는지 알 것 같습니다. 1. useEffect의 구조입니다. useEffect(, ); function은 컴포넌트가 (re)render 되었을때 실행할 함수이며, 그다음 파라미터인 array는 어떤 state의 변화가 감지되었을때만 render를 하고 싶을때 그 변수를 ..

리액트의 컴포넌트들은 다음과 같이 세 단계를 거치게 됩니다. 초기화, 업데이트, 소멸. 각 단계에서 호출되는 메서드를 생명 주기 메서드 라고 합니다. React 입문자가 사이트를 만들어 보게되면 생명주기를 잘 이용하지 않을 뿐더러, 중요성을 잘모르고 만들다보면 꼭! 어느순간 뒤통수를 쎄게 맞는 순간이 있습니다.. 내 뒤통수가 푹 파인 이유... 요즘은 React Hook을 이용한 Functional Component가 대세라고 하지만 아직까지 어느 부분에 있어서는 class형 컴포넌트를 사용함에 이점이 있고, 사용하는 사람들도 은근 많은것 같습니다. 그럼 자주보이는 React 생명주기를 하나씩 살펴보겠습니다! ■ constructor constructor 메서드 작성이 필요한 대표적인 예는 초기 속성값으..

개인적으로 구글 파이어베이스가 다른 플랫폼에 비해 사용하기가 쉽다고 생각됩니다. 가장 좋은건 파이어베이스 Auth를 통해 각종 소셜 로그인을 쉽게 구현할 수 있고 Realtime DB와 store를 통해 프로젝트를 쉽게 만들어볼 수 있습니다. 오늘은 React 프로젝트에서 구글Firebase연동을 통해 구글로그인을 할 수 있도록 설정해보겠습니다. 1. 파이어베이스에 로그인하여 프로젝트를 생성합니다. 2. 프로젝트를 등록하고 받은 firebase SDK를 저장해놓습니다. 3. 이제 다시 VSC로 돌아와 터미널에서 firebase를 설치해 줍니다. npm install firebase 그리고 아까 저장해두었던 SDK를 가지고 유틸 컴포넌트를 하나 만들어줍니다. // firebase_config.js impo..

오늘은 React 프로젝트를 Firebase에 호스팅 하는 방법과 순서에 대해서 얘기를 해보겠습니다. 우선 Firebase란? 구글에서 제공해주는 인프라로 서버와 DB 등 많은 유용한 서비스를 쉽게 사용할 수 있게 제공해주는 서비스입니다. 이용량과 사용하기에 따라 요금이 부과될 수 있지만 보통 작은 프로젝트나 개발연습용 정도의 사용량은 무료버전으로 사용할 수 있어 저는 자주 사용하는 것 같습니다. 아래 과정은 구글 파이어베이스에 프로젝트 등록이 되어있음을 가정하고 호스팅 과정을 보여줍니다. 1. 먼저 Firebase를 쉽게 이용하기 위한 명령줄 도구를 설치하겠습니다(Firebase CLI) npm install firebase-tools -g 2. 프로젝트 초기화단계 // 1st 로그인은 1회만 하면 됩..