react13 바닐라코딩 부트캠프 5주차 후기 바닐라코딩을 시작한지 5주가 지났다. 4주차는 test 및 break 주간이라 따로 후기를 쓰지 않았고, React를 배우고 github 배틀 과제를 했던 5주차 후기를 작성한다. 부트캠프에서 React를 배운다는 점은 이미 알고 있었던터라, 많이 연습하고 들어오고 싶었는데 사실 React는 만족할만큼 충분히 예습하고 들어오진 못했었다. 게다가 나는 Class 기반 Component로 진행되는 강의를 들었던지라, ken 님이 알려주셨던 함수형 Component가 좀 생소해서 어려움이 있었다. 공식문서를 최대한 꼼꼼히 읽으면서 하나 둘 이해하고 있지만 아직 많이 부족하다고 느껴진다. 게다가 테스트 코드도 처음으로 작성해봤는데, 마치 1주차 과제에서 each를 맞닥뜨린 것 같은 느낌이었다. 아는 사람은 아는.. 2020. 2. 9. 200207(금) : Uncontrolled vs. Controlled Component in React React의 컴포넌트를 설명할 때 Uncontrolled Component와 Controlled Component라는 개념이 있다. 이 둘에 대해서 살펴보자. 1. 왜 uncontrolled와 controlled 컴포넌트에 대해 알아야 할까? React는 내부의 상태(state)를 '신뢰 가능한 단일 소스(Single Source of Truth)'로 관리하려는 설계 원칙을 가지고 있다. 즉 자식 컴포넌트가 data가 필요할 경우, 해당 data는 가장 가까운 공통 부모 컴포넌트에게서만 props의 형태로 전달받아서 사용해야 한다. 대부분의 HTML 엘리먼트들(ex. 등)은 엘리먼트가 내부적으로 어떤 데이터를 가지지 않기 때문에 문제될 것이 없다. 하지만 HTML 엘리멘트 중 자체적으로 특정 data를 .. 2020. 2. 7. 리액트로 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. 비동기로 작동하는 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. 리액트 useState() Hook : 함수형 컴포넌트로 state 관리하기 *Udemy의 "React - The Complete Guide" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. useState() 메소드로 state 관리 및 조작하기 최초 리액트가 등장했을 때는 state를 다룰 필요가 있을 경우 class 기반으로 컴포넌트를 만들고, state 조작이 필요없는 경우에 함수형 컴포넌트로 만드는 방식이 표준이었다. 그러나 리액트가 업데이트 되면서 함수형 컴포넌트에서도 state를 관리할 수 있게 진화했다.(그러나 강의가 촬영된 시점을 기준으로, 여전히 실무에서는 class 컴포넌트로 state를 관리하는게 대체로 표준이라고 한다.) 기.. 2019. 12. 5. 이전 1 2 다음
