성연커밋 : )

axios를 이용하여 newsapi를 가져왔다. 불러오기 버튼을 클릭하면, api내용들이 나온다. 보면, 저자, 제목, 내용, url바로가기, 사진, 날짜 등이 나온다. 이 api를 가지고 스타일을 입혀, 뉴스뷰어를 만들어 볼 것이다. 즉, 바로 이렇게 완성이 될 것이다. App.js import React from 'react'; import NewsList from './components/NewsList'; const App =()=>{ return }; export default App; App.js 코드는 NewsList를 호출한다. Newslist.js import React, {useState, useEffect} from 'react'; import styled from 'styled-co..

axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트 HTTP 요청을 Promise 기반으로 처리한다는 점이 특징이다. yarn add axios 로 설치 axios로 api를 받아온다. ex) axios.get('주소').then(response=>{ setData(response.data); });

SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어로 한 개의 페이지로 이루어진 애플리케이션이다. 뷰 렌더링을 사용자의 브라우저가 담당하도록 하여, 애플리케이션을 브라우저에서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해준다. 새로운 데이터가 필요하다면? 서버 API를 호출하여 필요한 데이터만 새로 불러와 그 부분만 수정! SPA의 단점은 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는 것! 페이지 로딩 시 실제로 방문하지 않을 스크립트도 불러오기 때문 => 코드 스플리팅을 사용하여 라우트별로 파일들을 나누어 해결! SPA라고 단 한페이지만 있는 것이 아님! =>라우터를 이용하여 페이지 이동

컴포넌트의 성능을 최적화할 수 있는 React.memo함수가 있다. 이 함수는 컴포넌트의 props가 바뀌지 않았다면 리렌더링이 되지 않도록 설정하여주는 함수형 컴포넌트의 리렌더링 성능을 최적화해줄 수 있다. 함수형 컴포넌트에서는 shouldComponentUpdate라이프사이클 메소드를 사용하지 못하기 때문에 React.memo함수를 이용하여 성능을 최적화한다. 사용방법 함수형 컴포넌트의 마지막에 export default React.memo(컴포넌트명) 을 입력해주면 된다. 이러면 해당 컴포넌트는 파라미터 값이 바뀌지 않는다면, 리렌더링이 되지 않는다!

완성 사진 App.js - import React, { useState, useRef, useCallback } from 'react'; import TodoTemplate from './TodoTemplate'; import TodoInsert from './TodoInsert'; import TodoList from './TodoList'; const App = () => { const [todos, setTodos] = useState([ { id: 1, text: '리액트의 기초 알아보기', checked: true, }, { id: 2, text: '컴포넌트 스타일링해 보기', checked: true, }, { id: 3, text: '일정 관리 앱 만들어 보기', checked: false,..

Module not found: Can't resolve 'react-icons/md' in 'C:\Users\lg\Desktop\project\todo-app\src' 이러한 에러가 떴다. react-icons 패키지 설치가 필요했던 것..! npm install react-icons --save https://react-icons.github.io/react-icons 여기에도 설치하라는 문구가 잘 나와있다. 리액트를 다루는 기술 책에는 나와있지 않음!!

sass를 설치하기 위해 yarn add node-sass@4.14.1를 설치해주었다. 책 리액트를 다루는 기술에선 뒤에 버전을 명시해주었지만, 버전을 명시해주어 설치하니 아래와 같은 에러가 떴다. gyp ERR! node -v v16.0.0 gyp ERR! node-gyp -v v3.8.0 인터넷을 찾아보니 노드의 버전이 16이라서 안되는 것 같았다. yarn add node-sass 를 하면 설치가 되나, 실행할때 위와 같은 에러가 뜰것이다. ./src/SassComponent.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-load/cjs.js??ref--5-oneOf-6-1!./node_modu..

책 '리액트를 다루는 기술' 230p부터 설명해주는 sass-loader 설정을 커스터마이징 해주는 부분에서, yarn eject를 하여 config라는 디렉터리가 생겼다. 해당 디렉터리 안에 webpack.config.js 에서 sassRegex라는 키워드를 찾아 약간을 수정해주었다. { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders({ importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }).concat({ loader: require.resolve("sass-loader"), options: { sassOptions: { inclu..

Hooks는 함수형 컴포넌트에서 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 할 수 있는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있다. useState - 가장 기본적인 Hooks - 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해준다. useState 함수는 하나의 상태 값만 관리할 수 있음 컴포넌트에서 관리해야 할 상태가 여러개일땐? useState도 여러번 사용하자! useEffect - 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행되도록 설정할 수 있는 Hook 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 봐도 무방 - 렌더링되고 난 직후마다 실행되며,..

라이프사이클 메소드는 모든 리액트 컴포넌트에 존재한다. 컴포넌트의 수명은 페이지에서 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질때 라이프사이클 메소드 종류 -Will : 어떤 작업을 작동하기 전에 실행 -Did: 어떤 작업을 작동한 후에 실행 마운트 -DOM이 생성되고 웹 브라우저상에 나타나는 것 업데이트 -props가 바뀔때 -state가 바뀔때 -부모 컴포넌트가 리렌더링될 때 -this.forceUpdate가 강제로 렌더링을 트리거할 때 언마운트 -마운트의 반대 과정으로, 컴포넌트를 DOM에서 제거하는 것 redner()함수 -컴포넌트 모양새 정의 -필수 메소드 constructor() 메서드 - 컴포넌트의 생성자 메소드로 컴포넌트를 만들 때 처음으로 실행 - 초기 state를 정할 수..