Destructuring Assignment (구조 분해 할당) Destructuring Assignment란? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 객체 및 배열 리터럴 표현식을 사용하면 쉽게 데이터 뭉치를 만들 수 있음 구조 분해 할당의 구문은 위의 표현식과 비슷 하지만, 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의함 배열 구조 분해 기본 변수 할당 선언에서 분리한 할당 변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있음 기본값 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용함 변수 값 교환하기 하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있음 구조 분해 할..
Conditional-rendering(조건부 렌더링) Conditional-rendering(조건부 렌더링)란? 특정 조건에 따라 다른 컴포넌트를 렌더링 하는 것 예를 들어, 데이터가 로딩 중 일 때, 데이터가 없을때 등등 다양한 상황에서 조건식에 따라 다른 컴포넌트를 렌더링 할 때 사용 기본적인 자바스크립트에서 제공하는 조건문인 if/else, switch/case 등이 있음 조건부 렌더링 방법 ① if / else 가장 기본적인 방법 컴포넌트 props 값에 따라 리턴하는 리액트 컴포넌트를 분기 처리함 ② switch / case 조건이 다양할 때 사용 ③ 논리 연산자(&&) 논리 연산자 &&를 사용 ┌ ⓐ data가 참일 때 : && 뒤의 data.fetchProduct가 렌더링 됨 ├ ⓑ dat..
Static, Dynamic Routing Routing 이란? 목적지까지 갈 수 있는 여러 경로 중 한가지 경로를 설정해주는 과정을 의미 라우터 객체를 이용해 페이지를 이동하는 것 └ 라우터 객체 : 페이지 이동과 연관된 객체 라우팅의 종류에는 Static Routing(정적 라우팅)과 Dynamic Routing(동적 라우팅)이 있음 React에서 router를 사용하기 위해서는 위와 같이 useRouter를 사용해야 함 이는 react-hooks 기능을 사용한다는 뜻 Router 객체의 종류 router.push("이동할 페이지") : 지정 페이지로 이동 router.replace("이동할 페이지") : 지정 페이지로 이동하되, 현재 페이지 기록을 저장하지않음 router.back() : 이전 페이..
try ~ catch try ~ catch란... 에러가 발생하게 되면 스크립트는 즉시 중단되고, 콘솔에 에러가 출력되지만, try ~ catch 문법을 사용하면 스크립트가 즉시 중단되는 것을 방지하고, 에러를 잡아서(catch) 더 합당한 무언가를 할 수 있게 함 try ~ catch 동작 먼저, try { } 안의 코드가 실행됨 에러가 없다면, try 안의 마지막 줄까지 실행되고, catch 블록은 건너뜀 에러가 있다면, try 안 코드의 실행이 중단되고, catch(error) 블록으로 제어 흐름이 넘어감 따라서, try { } 블록 안에서 에러가 발생해도, catch에서 에러를 처리하기 때문에 스크립트는 중단되지 않음 ※ 변수 error(어떤 이름이든 사용 가능)는 무슨 일이 일어났는지에 대한 설..
Async / Await Async / Await 란? Promise를 통해서 비동기 처리를 하는 방법도 있지만, Promise의 단점을 해결하기 위해 ES7에서 async / await 키워드가 추가됨 async / await 키워드를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있음 callback이나 promise와 같이 비동기 코드를 작성하는 새로운 방법 async는 함수 이름의 제일 앞에, await은 결과를 기다릴 함수 앞에 작성함 async는 함수에서 비동기 처리를 위한 promise 동작을 함 await은 호출되는 함수가 적절한 결과를 반환할 때까지 기다리도록 동작을 함 ※ promise는 비동기 처리에서 사용되는 객체로, promise가 상태를 관리하여 다른 코드가 비동기..
Rest-API vs GraphQL-API Rest API란 API(Application Programming Interface)란 └ 데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 상호작용을 촉진하며, 서로 정보를 교환 가능 하도록 하는 것 REST API의 정의 └ REST 기반으로 서비스 API를 구현한 것 └ 최근 OpenAPI, Micro Service 등을 제공하는 업체 대부분은 REST API를 제공함 REST API의 특징 사내 시스템들도 REST 기반으로 시스템을 분산해 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 할 수 있음 REST는 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있음 REST API를 제작하면 델파..
