📖 (160) 썸네일형 리스트형 Section2 Unit6 [React] React State & Props Section2 Unit6 [React] React State & Props 📌 Chapter1. React State & Props • 리액트는 단방향 데이터 흐름(one-way data flow)을 가진다. 따라서 React에서 데이터를 다룰 때는 컴포넌트들 간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여야 한다. • state와 props 모두 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 가지고 있다. props는 함수의 매개변수처럼 컴포넌트에 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다. 즉, props는 컴포넌트를 사용하는 외부자를 위한 데이터이고, state는 컴포넌트를 만드는 내부자를 위한 데이터이다. • 이번 챕터에서 React의 기본 개념인.. 고차 함수(higher order function)란 무엇일까? 👾 고차함수(higher order function)란? 고차 함수는 ① 함수를 전달인자(argument)로 받을 수 있고, ② 함수를 리턴할 수 있는 함수이다. ✔️ 1. 다른 함수를 인자로 받는 경우 다른 함수(caller)의 전달인자(argument)로 전달되는 함수를 콜백함수라고 한다. 콜백함수는 주로 어떤 작업이 완료되었을 때 호출하는 경우가 많다. 콜백 함수를 전달받은 고차 함수(caller)는, 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있다. 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있다. function double(num) { return num * 2; } // doubleNum은 다른 함수를 인자로 받.. Section2 Unit5 [React] React SPA Section2 Unit5 [React] React SPA 📌 Chapter1. React SPA • SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다. • SPA의 장점 1. 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트하기 때문에 SPA는 사용자의 행동에 빠르게 반응한다. 2. 서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과거와 같은 과부하 문제도 현저히 줄일 수 있다. 3. 화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다. • SPA의 단점 1. 브라우저는 첫 화면 로딩 .. React 기본, JSX(JavaScript XML)와 JSX 문법 규칙 한번에 알아보기 👾 JSX(JavaScript XML)란? JSX는 JavaScript를 확장한 문법으로 React에서 UI를 구성할 때 사용한다. JSX는 React에서 UI 컴포넌트를 선언적으로 작성하기 위해 도입되었다. 기존의 JavaScript 코드 안에 HTML과 유사한 구문을 인라인으로 작성하여 UI 요소를 표현할 수 있게 한다. 이는 UI와 관련된 로직과 마크업을 한 곳에서 작성할 수 있어 개발자에게 편리함을 제공한다. JSX를 사용하면 JavaScript 변수, 함수, 표현식 등을 마크업 안에서 중괄호({})로 감싸서 사용할 수 있다. 이를 통해 동적인 값을 템플릿에 쉽게 삽입하고, 조건문과 반복문 등을 활용하여 유연한 UI를 생성할 수 있다. JSX는 JavaScript가 확장된 문법이지만, 브라우저가 .. Section2 Unit4 [React] Intro Section2 Unit4 [React] Intro 📌 Chapter1. React Intro • React는 자바스크립트의 UI 라이브러리 • 리액트를 사용하면 UI를 보다 쉽게 구현할 수 있으며, 자바스크립트 문법을 그대로 사용하기 때문에 따로 공부할 문법들이 적다. 또한 현재까지 많은 사용자가 있기 때문에 참고할 레퍼런스가 많으며, 컴포넌트 기반으로 개발을 할 수 있기 때문에 재사용이 용이하게 코드 개발을 할 수 있다. 뿐만 아니라 리액트를 알고 있다면, React-Native를 통해 모바일 개발도 할 수 있다는 장점이 있다. • React의 특징 1. 컴포넌트 기반의 UI 라이브러리 (재사용가능) 2. 선언형 프로그래밍 3. 범용성 4. Virtual DOM (가상돔) ↓ React에서 사용되는 .. 간단하게 알아보는 Fetch API 👾 Fetch API 자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공한다. Fetch API가 제공하는 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수 있다. (이전에는 XMLHttpRequest를 사용했었다. Fetch는 더 좋은 대체제이다.) Fetch API는 Request와 Response 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고, CORS와 HTTP Origin 헤더 행동 등 관련한 개념도 포함한다. fetch() 메서드는 하나의 필수 매개변수로 가져오려는 리소스 경로를 받는다. 반환 값은 해당 요청에 대한 Respo.. Section2 Unit3 JS/Node 비동기 - fetchAPI Section2 Unit3 [JS/Node] 비동기 - fetchAPI 📌 Chapter4. fetch API • Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공한다. Fetch API를 사용해 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. 몇 번 사용해봐도 어렵다고 생각되었던 부분이라 여러 자료들과 수업내용을 바탕으로 Fetch API와 fetch() 메소드를 정말 간단하게 정리해보았다. 간단하게 알아보는 Fetch API 👾 Fetch API 자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 fay-story.c.. ES8, 비동기 처리를 위한 async / await 기본 문법 async/await 문법은 ES8에 해당하는 문법으로서, Promise 를 더욱 쉽게 사용 할 수 있게 해준다. ⬇︎ 프로미스는 아래 글 참고 ES6, 비동기 처리를 위한 프로미스 (Promise) 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여 fay-story.com async 함수에는 await연산자가 포함될 수 있으며, await는 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환한다. async 함수는 항상 promise를 반환한다. 만약 async 함수의 반환값이 명시.. 이전 1 ··· 10 11 12 13 14 15 16 ··· 20 다음
