Sparta x 이노베이션 캠프/React (28) 썸네일형 리스트형 TIL: 리액트 컴포넌트 캡슐화 캡슐화된 컴포넌트란? 메인 어플리케이션으로부터 독립되어있는 컴포넌트를 뜻한다. 이로써 컴포넌트 내부에서 발생하는 업데이트, 테스트 케이스, 재사용에 용이하게 컴포넌트를 설계해야 합니다. 왜 작고 고립된 코드의 파편을 이용해서 만들어야 할까요? 다른 많은 이유가 있지만 가장 중요한 이유는 '거대한 어플리케이션을 쉽게 만들고, 유지 및 보수를 하기 위해' 이다. 조건부 렌더링 React 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다. 아래 두 컴포넌트가 있다고 가정하면, function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } 이제 사용자 로그.. WIL: Axios Axios 인스턴스, 인터셉터란? 인스턴스 만들기 사용자 지정 config로 새로운 Axios 인스턴스를 만들수 있다. axios.create([config]) const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); 인스턴스 메소드 다음은 사용 가능한 인스턴스 메소드입니다. 지정된 config가 인스턴스 config와 결합됩니다. axios#request(config) axios#get(url[, config]) axios#delete(url[, config]) axios#head(url[, config]) axios#optio.. TIL : API란 무엇인가요? API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용프로그램)와 상호 작용하여 요청된 메뉴(명령에 대한 값)를 전달합니다. 쉽게말해 API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체. API의 역할 1. API는 서버와 데이터베이스에 대한 출입구 역할을 한다. 데이터베이스에 저장된 정보들이 모든 사람들에게 접근되지 않기 위해 서버와 데이터베이스에 대한 출입구 역할을 하며, 허용된 사람들에게만 접근성을 부여해준다. 2. API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다. 여기서 애플리케이션은 우리가 흔히 아는 스마트폰 어플, 프로그램을 말한다. API는 애플리케이션과 기기가 데이터를 원활히 주고받을 수 있도록 돕는 역할을 한다. .. TIL)React 키워드 🔐 리덕스에서 미들웨어 청크의 역할은 뭘까요? 미들웨어는 액션이 디스패치 된 다음 리듀서에서 액션을 처리하기 전에 액션을 받아와서 액션을 취소시키거나 다른 종류의 액션을 추가적으로 디스패치하는 등 업데이트 이전에 추가적인 작업을 할 수 있도록 도와주는 역할이다. 즉 리듀서 내 로직이 실행되는 사이의 중간다리 역할을 해줄 함수들을 작성하는 공간이다. thunk의 역할 1) thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해준다. 즉 dispatch(객체)가 아니라 dispatch(함수)를 할 수 있게 되는 것. 2) 그래서 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행이 되는 것이다. 그래서 아래 흐름과 같이 실행이 되.. TIL) async & await async와 await 라는 특별한 문법을 사용하면 프로미스를 좀 더 편안하게 사용할 수 있다. async함수 asyncs는 fuction 앞에 위치한다. async function f() { return 1; } function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스 (resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다. 아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환된다. async function f() { return 1; } f().then(alert); // 1 명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일하다. async function f() { re.. TIL) Promise Promise란? -Promise는 주로 웹서비스를 구현 할 때 원활한 데이터 통신을 위해 활용됩니다. -웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용 -Promise를 사용하지 않고 실행시키면 먼저 로직이 끝나는 순서로 출력이 되지만, Promise를 사용하면 순서대로 출력을 시킬 수 있습니다. 프로미스의 3가지 상태 Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태 2-1) Pending new Promise(); new Promise((resolve, rej.. TIL) useEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 다시말해 화면에 컴포넌트가 mount 또는 unmount되었을 때 실행하고자 하는 함수를 제어하게 해주는 훅이다. import React, { useEffect } from "react"로 import해서 사용한다. useEffect와 리렌더링 import React, { useEffect, useState} from "react"; const App = () => { const [value, setValue] = useState(""); useEffect(()=> { console.log("hello useEffect") }) return ( { setValue(event.target.value).. TIL) useState의 두가지 업데이트 방식, 비동기적 동작과 batch처리 1. 함수형 업데이트 setState 사용 방식에는 일반적 사용법, 함수형 업데이트 방식이 있다. // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); 위 함수형 업데이트의 ()안에는 수정할 값이 아닌 함수를 넣을 수 있다. 그 함수의 인자에서는 현재의 state를 가져올 수 있고, {}안에는 이 값을 변경하는 코드를 작성할 수 있다. // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다. setState((currentNumber)=>{ return currentNumber + 1 }); 2. 두 방식의 차이점 일반 업데이트 방식은 onClick안에서 setNumber(number+1)를 3번 호출했.. 이전 1 2 3 4 다음
