우당탕탕 개발일지

재사용 가능 컴포넌트는 코드 중복을 방지하기 위해 애플리케이션의 여러 영역에서 공유할 수 있다. 깔끔한 인터페이스를 사용하는 작은 컴포넌트를 조합해 복잡한 애플리케이션을 만드는 방식은 유지관리하기도 쉽다. 컴포넌트를 조합할 때는 프로퍼티를 사용해 컴포넌트 사이에 데이터를 공유한다. 소유자가 render 메소드 안에 정의된 컴포넌트로 전달하는 children이라는 특수한 프로퍼티가 있다. 이 프로퍼티는 포함하는 값에 대한 정보를 전혀 제공하지 않기 때문에 리액트 설명서에서는 이를 불투명하다고 설명하고 있다. 부모 컴포넌트의 render 메소드에 정의된 하위 컴포넌트는 보통 JSX에서 컴포넌트 자체의 속성으로서 전달되거나, createElement 함수의 두 번째 매개변수로 전달된 ..

컴포넌트가 렌더링 될 때마다 side-effect를 처리하는 작업을 해주는 Hook으로 최초에 한번은 무조건 동작한다. useEffect는 실행 시 두 가지 인자를 받는다. 첫 번째 인자 'useEffect'가 호출될 때마다 side-effect를 정의하는 함수 의존성 배열 side-effect의 상태 변화를 감지 해당 배열에 포함된 요소의 상태가 변화되어야 side-effect를 실행시킨다. 빈 배열이라면 최초에 한 번만 실행된다. import React, { useEffect } from "react"; function Example(){ useEffect (() => { //side-effect를 실행하는 함수 console.log('컴포넌트가 화면에 나타남'); return() => { //cle..

Fetch와 Axios 차이점 fetch는 Promise 기반으로 만들어졌으며, 내장 라이브러리이기 때문에 별도의 import가 필요없기에 편리하다. 그러나 많은 사람들이 axios를 사용하는 것을 더 선호한다. 그 이유는 다음과 같다. fetch는 네트워킹에 오류가 있는 상황에서만 Promise를 reject 시키기 때문에 모든 fetch 호출에 오류를 처리하는 함수를 작성해야 한다. axios는 모든 HTTP 에러를 reject하는 Promise를 반환하기에, 모든 에러를 catch에서 처리할 수 있어서 편리하다. 또한, 인터셉터, 요청 설정 등 fetch보다 다양한 기능을 지원한다. Axios 사용 방법 - axios 설치 $ npm install axios - HTTP 요청 전송 import ax..

fetch 함수에는 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다. const promise = fetch(url [, options]) fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다. 후속 처리 메서드 then을 통해 Promise가 resolve한 Response 객체를 전달받을 수 있다. fetch('https://api.example.com/data') .then(response => { console.log(response) }); .catch(error => { console.log(error); }); - HTTP 응답 처리 Response 객체는 HTTP 응답을 나타..

Ajax - Asynchronous JavaScript and Xml JavaScript를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - XMLHttpRequest AJAX는 서버와 비동기적으로 데이터를 교환하기 위해 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 사용한다. 이 객체는 요청을 처리하고 응답 데이터를 받아오는 데 사용이 된다. 현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있다. - HTTP 요청 전송 // XMLHttpRequest 객체 생성 const xhr = new XMLHttpRequest(); //..

export 변수, 함수, 클래스 앞에 export 키워드를 붙여서 모듈의 기능을 외부에서 사용할 수 있도록 내보냄 import export로 내보낸 모듈을 가져오는 기능 담당 React에서 컴포넌트를 export 하는 방법에는 두 가지가 있다. export default 문을 사용하는 방법 import 시 괄호 없이 가져올 수 있음 컴포넌트 이름을 바꿀 수 있음 const MyComponent = () => { // 코드 블럭 } export default MyComponent export function 문을 사용하는 방법 import 시 괄호를 사용해야 가져올 수 있음 컴포넌트 이름을 바꿀 수 없음 export function MyComponent(){ // 코드 블럭 }

새로 만들 컴포넌트가 라이프사이클 API와 state를 사용하지 않고, props만 전달해주면 뷰를 렌더링 해주는 역할일 경우 주로 사용한다. function 함수명 (파라미터) { //코드 블럭 } 장점 클래스형보다 선언하기 편함 메모리 자원 절약 리액트 공식 메뉴얼에서는 컴포넌트를 작성할 때 함수형 컴포넌트 + Hooks를 사용하도록 권장하고 있다고 한다. ES6부터 도입된 새로운 함수 선언 방식으로, 간단하고 간결한 문법으로 함수를 선언할 수 있다. 화살표 함수가 기존 function()을 완전히 대체할 수는 없다. 일반 함수는 자신이 종속된 객체를 this로 가리키고, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 화살표 함수는 값을 연산하여 바로 변..

localStorage는 웹 브라우저에서 제공하는 클라이언트 측 데이터 저장소이다. 웹 페이지에서 사용하는 데이터를 로컬에 저장하고, 나중에 사용할 수 있다. 저장해야할 데이터가 별로 중요하지 않거나 잃어버려도 상관없는 데이터일 때 효율적이다. 세션이 유지되는 동안에만 데이터를 저장할 수 있는 sessionStorage와 달리, localStorage는 데이터가 영구적으로 보존된다. setItem() - ( key, value ) 데이터 저장 localStorage.setItem("key", "value"); getItem() - 데이터 가져오기 const value = localStorage.getItem("key"); console.log(value); removeItem() - 데이터 삭제하기 lo..