ReactJS

[ReactJS] 리액트 200제 _ ex013 ~ 015 ( 화살표 함수, forEach(), map() )

013 화살표 함수 사용하기 화살표 함수 function 대신 =>을 사용하며 retrun 문자열을 생략할 수 있음 ES6에서 등장함 콜백 함수에서 this를 bind 해야 하는 문제도 발생하지 않음 콜백함수 : 다른 코드의 인수로서 넘겨주는 실행 가능한 코드 this : 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 식별자 this는 함수가 호출되는 방식에 따라 동적으로 결정됨 this 바인딩 : this를 고정시키는 것 참고 문서 https://kamang-it.tistory.com/entry/JavaScript07this-this바인드편bindcallapply import React, { Component } from "react"; class R013_ArrowFunction..

[ReactJS] 리액트 200제 _ ex009 ~ 012 (문자열, 변수, 전개연산자, 클래스)

009 템플릿 문자열 사용하기 ES (ECMA Script) 는 표준화된 스크립트 언어이고, 그 뒤에 붙는 숫자는 버전을 의미한다 2011년부터 ES5가 웹 표준처럼 사용되고 있고, 2015년 발행된 ES6는 자바스크립트가 따르는 기술 규격이다 React도 ES6의 모든 기능을 사용할 수 있다 `hello ${변수명} world` 문자열과 함수 합치기 위해서 백틱과 ${ }를 사용한다 startsWith() 변수 앞에서부터 일치하는 문자열이 있는지 찾는다 endsWith() 변수 뒤에서부터 일치하는 문자열이 있는지 찾는다 includes() 위치에 상관없이 변수에 특정 문자열이 포함돼 있는지 판단한다 return 값 자료형 = Boolean 010 var, let, const 사용하기 var : (ES5..

[ReactJS] 리액트 200제 _ ex006 ~ 008 (생명주기 함수)

06 getDerivedStateFromProps(props, state) 컴퍼넌트가 새로운 props를 받게 되었을 때 state를 변경해줌 constructor( ) 함수 다음으로 실행된다 App.js에서 전달한 prop_value라는 변수를 props.prop_value로 접근해 값 가져옴 보다시피 constructor > getDerived > render 순으로 실행되었다. 07 componentDidMount( ) 생명주기 함수들 중에서 가장 마지막에 실행됨 render( ) 함수가 코드를 화면에 그려준 후 실행됨 화면 그려지는 것이 끝난 후의 이벤트 처리, 초기화 등 가장 많이 활용되는 함수임 08 shouldComponentUpdate() 생명주기 과정 중 component의 변경(prop..

[ReactJS] 리액트 200제 _ ex001 ~ 005

003 component: 특정 코드 뭉치를 다른 부분에 이식하거나 재 사용하기 위해 사용하는 코드 블록 단위 004 생명주기: component의 생성, 변경, 소멸 과정을 뜻함 component 생성 함수 render() constructor() getDerivedStateFromProps() componentDidMount() 005 contructor 함수가 헷갈려 검색해봤다 참고 문서 https://corini.tistory.com/entry/리액트React-학습자를-위한-기초지식-컴포넌트-생명주기 https://www.javatpoint.com/react-constructor contructor(props) 컴포넌트가 실행될 때 가장 먼저 호출되는 함수 생명주기 함수 중 가장 먼저 실행됨 처음..

[ReactJS] Firebase Auth #02

로그인 방법 Firebase Project에 들어가 로그인 방법을 설정한다 Manage Users https://firebase.google.com/docs/auth/web/start?hl=ko 이 문서를 바탕으로 사용자를 관리한다 State Persistence 문서: https://firebase.google.com/docs/auth/web/auth-state-persistence State Persistence는 사용자들을 어떻게 기억할 수 있는지 선택할 수 있게 한다 session은 탭이 열려있는 동안에는 사용자 정보를 기억하는 것을 의미한다 local은 탭을 닫더라도 사용자 정보를 기억하는 것을 의미한다 (기본값) none은 사용자 정보를 기억하지 않는 것이다 On Auth State Chang..

[ReactJS] Firebase Auth #01

Firebase Auth Firebase Auth를 사용하려면 먼저 import를 해야 한다 /src/fbase.js import "firebase/auth"; /components/App.js import firebase from "../fbase" Absolute Imports 절대적인 경로로 import하려면 jsconfig.json 파일을 생성하여 아래의 형식 같이 코드를 작성하면 된다 참고: https://create-react-app.dev/docs/importing-a-component jsconfig.json ( 파일 경로가 src로부터 시작되게 설정하는 코드 ) { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 그리고 상대적..

[ReactJS] Router Setting

1. /src에 components와 routes 폴더를 생성한다 2. App.js 파일을 components 폴더에 담은 후 index.js 파일에서 App.js의 경로를 수정한다 /src/index.js import App from './components/App'; 3. routes 폴더에 Auth.js, Home.js, Profile.js, EditProfile 파일을 생성하고 다음과 같이 코드를 작성한다 Routes component들을 입력하고 Enter을 눌렀을 때 자동으로 import할 수 있게 한 것이다 /src/routes/Auth.js import React from "react" const Auth = () => Auth; export default Auth; 4. npm i rea..

[ReactJS] Firebase 연결하기

1. https://console.firebase.google.com/u/0/?hl=ko로 이동하여 프로젝트를 만든다 2. 생성한 프로젝트에 들어가 웹 App을 생성한다 3. npm i firebase@9.6.1를 입력하여 Firebase를 설치한다 4. 아래 표시한 부분을 복사한다 5. src 폴더에 fbase.js를 생성하여 아래와 같이 입력한다 import * as firebase from "firebase/app" // 복사한 코드 붙여넣기 export default firebase.initializeApp(firebaseConfig) 6. npm run start를 했을 때 문제가 없으면 된다 7. 그리고 index.js 파일에 firebase를 import한다 import firebase fr..

[ReactJS/VSC] 깃헙 페이지 Deploy하는 방법

1. Repository를 생성한 후 vs 명령창에 git remote add origin https://github.com/gaeunnlee/ReactJS-Twitter-App.git을 입력한다 2. git branch -M gh-pages을 입력하여 gh-pages가 main branch가 되도록 설정한다 3. git add ., git commit -m "MESSAGE"로 변경 사항을 gh-pages branch에 commit한다 4. git push -u origin gh-pages를 입력하여 깃헙에 push한다 5. package.json 파일 밑에 깃헙 페이지 주소를 아래와 같이 추가한다 "homepage": "https://gaeunnlee.github.io/ReactJS-Twitter-Ap..

[ReactJS] TIL #11

Coin Tracker App 만들기 Coin Tracker App을 만들기 위해서는 API를 사용해야 한다 const [coins, setCoins] = useState([]); // api로 받은 코인들을 나타내기 useEffect (() => { fetch("https://api.coinpaprika.com/v1/tickers") .then(response => response.json()) // response로부터 json 추출 .then((json) => { setCoins(json) // json 값을 coins 배열에 담는다 }); }, []) useEffect()를 통해 API를 처음 한 번만 가져오게 하고 fetch()를 통해 api를 호출한다 response로 받은 json을 추출하여..