React/기본
-
React - useMemo와 useCallbackReact/기본 2020. 11. 15. 23:03
useMemo란? 함수형 컴포넌트 내부에서 발생하는 연산을 최적화시킬 수 있는 Hooks를 말한다. 예제를 통해 알아보자. 먼저 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여주는 함수형 컴포넌트를 작성해보자. Average.js import React, { useState } from "react"; const getAverage = (numbers) => { console.log("평균값 계산 중..."); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = us..
-
React - Virtual DOMReact/기본 2020. 7. 20. 00:25
Virtual DOM이란 무엇인가? 우선 Virtual DOM은 이름 그대로 가상의 DOM을 의미한다. 리액트의 주요 특징 중 하나이며, DOM을 빈번히 업데이트하는 것을 좀 더 효율적인 방법으로 업데이트하기 위해 만들어졌다. 그렇다면 DOM은 무엇인가? DOM은 Document Object Model의 약어이다. 웹 페이지가 화면에 로딩되면 브라우저는 페이지의 문서 객체 모델(DOM)을 만든다. 이 DOM을 더 간단히 설명하자면, 애플리케이션의 UI를 나타내며, HTML 파일의 JavaScript 표현을 말한다. 애플리케이션 UI 상태가 변경 될 때마다 DOM은 트리 형태이기 때문에 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입도 가능하다. 왜 DOM에 바로 접근하는 대신 Virtual D..
-
React - 초기 렌더링과 리렌더링React/기본 2020. 7. 18. 16:31
렌더링이란? 사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다. 그렇다면 리액트 라이브러리는 뷰(View)를 어떻게 렌더링 하길래 데이터가 변할 때마다 새롭게 리 렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까?? 이것의 해답은 바로 초기 렌더링과 리렌더링에 있다. 초기 렌더링 리액트는 맨 처음 어떻게 화면에 보여질 지를 다루는 render() 함수가 존재한다. 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. render() 특징 render() 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 지닌 객체를 반환한다. 또, 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되..
-
React - class 컴포넌트React/기본 2020. 6. 22. 20:00
예전의 React에서는 class component가 중요한 역할을 맡았었다. 그러나 React 16.8.0 업데이트 이후에 Hooks이 추가가 된 이후에 함수형 컴포넌트에서도 LifeCycle API와 state 기능을 구현할 수 있어 이제는 잘 사용하지 않는다. 하지만, class형 component를 써야 하는 상황이 올 수 있기 때문에 정리가 필요하다. 1. import React, { Component } from "react"; - react 라이브러리에서 함수 또는 클래스를 import(확장)한다. - improt 문법은 JavaScript(ES6) 문법 중 하나로 export 된 다른 파일의 함수 또는 클래스를 불러와 사용할 수 있도록 하는 기능이다. 2. class ClassCompone..
-
React - map() 활용React/기본 2020. 5. 24. 23:01
아래 나열된 순서대로 진행해 주세요. 1. API 주소를 호출하여 데이터 로딩을 처리해주세요! - componentDidMount() - fetch - setState (monsters에 저장) 2. SearchBox 컴포넌트에 정의한 handleChange 메서드를 넘겨주고, 호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput으로 setState. App.js 1. App.js에서 API 호출 호출할 API 주소 : https://jsonplaceholder.typicode.com/users 위 주소를 호출하여 데이터 로딩을 처리하기 리액트에서 데이터 로딩을 할때, 필요한 메서드가 존재한다. 그것은 바로 fetch()라는 메서드이다. 그렇다면 fetch()의 적절한 위치는 어디인가? 바..
-
React - request/response 이해하기React/기본 2020. 5. 24. 10:00
소스로 이해하기 1. fetch()의 첫 번째 인자는 백앤드에서 만든 API와 연결하는 것을 의미한다. 2. 두번째 인자로는 요청하는 값을 의미한다. - method는 보내는 방식을 의미한다. ex) POST / GET - header는 해당 request에 대한 추가 정보(addtional information)를 담고 있는 부분이며, 설명 같은 내용이 들어있는 메타 데이터라고 보면 된다. HTTP Header에 쓰이는 Content-Type이란 무엇일까? request에 실어 보내는 데이터(body)의 type의 정보를 표현한다. ex) text/css, text/javascript, text/html, text/plain Content Type은 Request에 실어 보내는 data의 type에 따..
-
React - 메인 페이지 기능 구현React/기본 2020. 5. 20. 10:00
Assignment 메인 페이지 - 사용자가 댓글 입력 후 Enter를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현해주세요. 피드 컴포넌트는 인스타그램에서 피드에 해당하는 부분이다. 바로 이 부분이다. Feed.js 댓글 구현할 부분은 이 부분이다. Comment.js 먼저 사용자가 먼저 댓글을 입력했을 때를 생각해보자. 일단 state안에 commentList: [], commentText: "", userId: "ljtaek2"ljtaek2"라는 값을 미리 초기화를 시켰다. input 태그에 무언가를 입력하는 순간 onChange 이벤트 핸들러가 실행되고, commentState라는 함수가 실행된다. commentState 함수 안에서 event를 이용해서 해당 input값을 setState..
-
React - 로그인 페이지 기능 구현React/기본 2020. 5. 19. 10:00
로그인 페이지의 기능을 구현해보자! Login.js 1. import React from "react"; : react 라이브러리에서 react의 함수나 클래스들을 가져와서 그 기능을 사용하려고 하는 구문이라고 보면 된다. import { withRouter } from "react-router-dom"; : "react-router-dom"은 DOM에 접근하고 DOM이 인식할 수 있는 컴포넌트들만 뺀 라이브러리이다. "react-router-dom" 안에 있는 withRouter라는 2. class Login extends React.Component { render(){ return(); } } export default withRouter(Login); : class형 컴포넌트를 만드는 형식이다. ..