본문 바로가기
  • soldonii's devlog

Javascript 공부/React13

리액트로 google 로그인 추가하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Google Authentication 추가하기 리액트에 google 로그인 기능을 추가하려면 우선 firebase 패키지를 설치해주어야 한다. 프로젝트 폴더에 들어간 후, yarn add firebase 로 해당 패키지를 추가해준다. 이후 아래처럼 새로운 파일을 생성한 후 importing한다. // firebase.utils.js 파일 새롭게 생성하기 import firebase from 'firebase/app'; import 'firebase.. 2019. 12. 17.
withRouting()으로 프로퍼티 전달하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. withRouting 앞선 글에서 props는 Route 컴포넌트의 프로퍼티로 전달된 첫번째 컴포넌트만 받을 수 있었다. 현재 만들던 앱의 구조를 살펴보면, Route 컴포넌트는 HomePage 컴포넌트를 렌더링하고 있다. 따라서 HomePage 컴포넌트 내부에서는 match, history, location 같은 객체를 이용할 수 있지만 HomePage 컴포넌트 내부에서 리턴하고 있는 Directory 컴포넌트, MenuItem 컴포넌트 등은 위 .. 2019. 12. 16.
리액트 라우터(React Router)로 컴포넌트에 프로퍼티 전달하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Router를 통해 각 컴포넌트에 전달되는 주요 프로퍼티 import React from 'react'; import { Route, Switch } from 'react-router-dom'; // import HomePage from './pages/homepages/homepage.component'; import './App.css'; const HomePage = (props) => { console.log(props); // 확인해보자. .. 2019. 12. 15.
리액트 라우터(React Router)로 라우팅하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 리액트에서 라우팅하기 리액트로 구현하는 웹페이지는 대부분 Single Page Application, 즉 HTML 파일은 하나만 가지고 있고, 나머지는 자바스크립트로 화면을 통제하여 서버와의 요청/응답 주고받기를 줄여 웹페이지의 로딩 속도를 줄이는 방식을 취하고 있다. 속도 측면에서는 SPA가 장점이 뚜렷하지만, 페이지 간 이동 시 주소의 문제가 발생한다. 예를 들면, 원래는 페이지에 따라서 url link가 달라지게 된다. www.soldonii... 2019. 12. 14.
리액트의 생명 주기(LifeCycle) 메소드 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 생명 주기의 1단계 - 생성(Mounting) 생성 단계는 컴포넌트가 constructor에 의해 초기화되고, rendering 과정을 거쳐 DOM에 최초로 그려지는 단계이다. 이 곳의 주요한 생명 주기 메소드는 componentDidMount가 있다. 생성 단계의 흐름을 순차적으로 정리해보자. 1. 컴포넌트의 base state가 최초로 constructor에 의해서 초기화 된다. 2. 초기화가 완료되면 render() 메소드가 실행된다. rend.. 2019. 12. 12.
비동기로 작동하는 setState 이해하기 *Udemy의 "Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 비동기로 작동하는 setState 메소드 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { constructor() { super(); this.state = { meaningOfLife: 47 } } render() { return ( {this.state.meaningOfLife.. 2019. 12. 11.
리액트에서 state를 다룰 때 주의해야 할 점 *Udemy의 "React - The Complete Guide" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. state 객체는 reference type! DOM에서 P 태그가 있는 부분을 클릭했을 때 해당 데이터가 DOM에서 사라지도록 해보자. App.js 파일에 deletePersonHandler 메소드를 추가한다. deletePersonHandler = (personIndex) => { const persons = this.state.persons; persons.splice(personIndex, 1); this.setState({persons: persons.. 2019. 12. 10.
React에서 조건문 사용하기 *Udemy의 "React - The Complete Guide" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Ternary Expression으로 조건문 사용하기 JSX에서 if 문으로는 조건문을 사용할 수 없다. 대신 Ternary Operator를 이용해서 조건문을 작성해야 한다. return ( Hi, I'm a React App This is really working! Switch Name { this.state.showPersons ? My Hobbies: Racing : null } ); Ternary Expression를 작성할 코드를 {} 전체 중괄호.. 2019. 12. 10.
리액트 useState() Hook : 함수형 컴포넌트로 state 관리하기 *Udemy의 "React - The Complete Guide" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. useState() 메소드로 state 관리 및 조작하기 최초 리액트가 등장했을 때는 state를 다룰 필요가 있을 경우 class 기반으로 컴포넌트를 만들고, state 조작이 필요없는 경우에 함수형 컴포넌트로 만드는 방식이 표준이었다. 그러나 리액트가 업데이트 되면서 함수형 컴포넌트에서도 state를 관리할 수 있게 진화했다.(그러나 강의가 촬영된 시점을 기준으로, 여전히 실무에서는 class 컴포넌트로 state를 관리하는게 대체로 표준이라고 한다.) 기.. 2019. 12. 5.