리액트의 모든 컴포넌트에는 생명주기(LifeCycle)이 존재한다. 컴포넌트의 수명은 페이지가 랜더링되기 전인 준비 과정에서 시작하며, 페이지에서 사라질 때 끝난다. 리액트에서 제공하는 라이프 사이클 메서드를 통해 1) 처음 랜더링할 때, 2) 컴포넌트가 업데이트 될 때 혹은 전/후, 3) 컴포넌트가 페이지에서 사라질 때의 시점에 함수를 호출할 수 있다. 각 시점 별로 분류한 호출 메소드는 다음과 같다. # Mount(생성) 시 호출하는 method - constructor : 생성자 - getDerivedStateFromProps : props로 받아온 값을 state에 동기화하는 메소드 static getDerivedStateFromProps(nextProps, prevState) { if(nextP..

책이나 강의를 살펴보면서 Ref에 대하여 두 가지 정도로 정리할 수 있었다. "1) 돔 요소를 선택할 수 있는 기능이다. 2) 값 변화가 일어나지만, state와는 달리 변화 시 re-render가 일어나지는 않는다." 1) Ref값을 이용해서 돔 요소를 선택할 수 있다. useRef()를 이용해서 지역 변수를 선언한 뒤, HTML 태그에 ref를 지정해주면 해당 HTML 태그와 선언한 Ref의 값이 연결된다. ref의 current 속성을 이용하면 엘리먼트를 제어할 수 있으며, 보통 input 엘리먼트와 audio 파일에 current 속성이 자주 사용된다. import { useState, useRef } from "react"; const DiaryItem = ({ onEdit, onRemove, ..

리액트를 배우며 가장 많이 등장했던 자바스크립트 함수가 바로 map 함수였다. map 함수는 배열을 다른 형태의 배열로 재생산할 때 쓰인다. 배열 내의 존재하는 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 배열의 각 요소에 대해 실행한 콜백의 결과를 모아 새로운 배열을 반환한다. 1) map Syntax : arr.map(Callback(currentValue,index,array),[thisArg]); 1) Callback 함수의 첫번째 인자 : 현재 처리할 요소를 변수로 나타낸 이름 ex. numbers.map(function(number){...}) 보통 이렇게 사용 2) Callback 함수의 두번째 인자(optional) : 처리할 요소의 원본 인덱스 값 3) Callback 함수의 ..

1. 배열 전체 원소 print하는 법 3가지 // 1. 반복문으로 print for(let i=0; i console.log(element)); array.forEach((element) => console.log(element.property)); forEach 용법 : 부가 기능 없이 모든 배열의 원소를 하나씩 점검 const arr = [1,2,3,4,5,6,7,8,9,10]; arr.forEach(element => console.log(element)); // 결과값 : // 엘리먼트 하나씩 콘솔에 찍음 2. 받아온 배열 혹은 배열로 만들 수 있는 스트링 컨버팅하기 1. string.split(); 스트링을 받아서 배열로 만드는 api. const fruits = '사과,딸기,오렌지'; let..

Query String이란? 클라가 서버에게 데이터를 전달, 요청하는 방법 중 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다. 여기서 미리 협의된 데이터란, API를 만드는 사람들이 지정해놓은 변수를 의미한다. 클라 측에서는 규약에 따라 URL에 입력 데이터를 제공하여 서버로부터 필요한 자원을 요청한다. 따라서 YouTube APIs가 지정한 규약에 따라 검색 데이터를 요청하려면, 아래와 같이 쓰면 된다. https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=surfing​

클래스형 컴포넌트 rcc + 엔터로 손쉽게 생성할 수 있다. 최근에는 함수형 컴포넌트를 더 많이 쓰는 추세이지만, 기존에 리액트로 만들어진 서비스들을 유지 보수하기 위해서 클래스형 컴포넌트를 알아야한다. state와 props가 변화하지 않는 컴포넌트 혹은 랜더를 한번만 시킬 컴포넌트는 'PureComponent'로 만들어준다. 이렇게되면 부모 컴포넌트에서 랜더가 일어나더라도 호출되지 않으며, 원하지 않는 랜더를 줄여 서비스의 성능을 향상시킬 수 있다. 함수형 컴포넌트 rsc + 엔터로 손쉽게 생성할 수 있다. // 함수형 컴포넌트 템플릿 import React from 'react'; const func = () => { return ( ); }; export default func; state와 re..