1, 리액트 contextAPI 1) 데이터를 전역으로 관리하자 contextAPI or Redux - API 문서 : https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org - React를 하다보면 여러 컴포넌트를 거쳐서 자료를 전달해야 하거나, 동시에 같은 자료를 사용해야 하는 경우가 생깁니다. Context는 리액트 컴포넌트 간에 어떠한 값을 공유 할 수 있게 해주는 기능입니다. 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용합니다. 2) Props로만 데이터를 전달하는 것은 한계가 있다. - 리액트에서는 일반적으..

1. Ajax란? - AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술입니다. - 웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 ajax기법을 사용하게 됩니다. - 이 작업은 시간이 오래 걸릴 수도 있기 때문에 비동기적으로 처리하게 됩니다. - 비동기(asynchronous)는 요청이 끝날 때 까지 기다리는 것이 아니라, 동시에 여러 작업을 수행하게 됩니다. - 나중에 react에서는 다른 서버의 REST API와 통신을 이용하여 데이터베이스 데이터를 가져올 수 있습니다. 2. ES6의 fetch를 이용해서 리액트에서 데이터 처리하기 - fetch를 하면 promise라는 객체를 반환함. ( promise.t..

1. 리액트 라우터 (책 p.403) 1) spa란? - 하나의 페이지로 만들어진 어플리케이션을 의미합니다. 전통적 웹 어플리케이션 vs SPA - SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 이용해서 처리합니다. - 브라우저에서 사용자가 상호작용 하면 필요한 부분만 업데이트 해서 처리합니다. - 멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됩니다. 2) SPA의 단점 - 앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래걸리게 됩니다. - 브라우저에서 렌더링이 완료되기 까지 비어있는 화면이 나오게 됩니다. - 그래서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리합니다. (웹팩 설정 필요) 3) 라우팅이란..

1. 리액트 스타일링 1) 태그에 직접 지정하기 2) 일반 css파일로 적용하기 3) css모듈로 적용하기 2. css 파일 이름 규칙 - 컴포넌트의 이름을 반드시 포함해서 만듭니다. ex) App.js - App.css 1] 태그에 직접 디자인을 적용 할 때는 {}로 묶어줍니다 - css 속성 중 - 은 카멜표기법으로 대체됩니다. style={{css속성: 값, css속성: 값}} 안녕하세요!! 2] 일반 CSS 문법으로 디자인을 해주면 되고 import로 가져오면 됩니다. * App.css .app_header { height: 50px; line-height: 50px; background-color: #000; margin: 0; padding: 0; } * App.js import './css/..

1. 리액트 기본 훅 * hook이란? - 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉩니다. - 리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능 - 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다. (useState, userEffect 등) - 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. * 훅의 규칙 - 최상위 에서만 Hook을 호출해야 한다 - 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다. - 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다. - 리액트 함..

* IterationComponentQ.js - 2번째 코드블럭의 경우 1, 3, 2 순서로 끌어 올려주면 handleContent 사용 가능 /* 이미지를 가져오는 방법 1. 외부 서버에서 경로를 참조 받는 방법(가장 일반적인 방법) 2. src폴더 밑에 img 파일 참조 가능 (선호 X) // import img1 from '../img/img1.png'; 3. public 폴더 밑에 넣는 경우 이미지를 바로 참조 할 수 있다. (추천) */ import { useState, useTransition } from "react"; const IterationComponentQ = () => { //1. 데이터 - public 폴더 밑에 예시로 사용하기 위해 넣습니다. const arr = [ { src..

1. state - 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다 - state가 체인지 되면 변화를 감지하여 리렌더링을 수행합니다. - 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다릅니다. - 함수형 컴포넌트에서는 훅 Hook개념을 이용해서 더욱 쉽게 사용 가능 합니다. * 나의 첫번째 훅 - useState(초기값) - useState() : 배열 반환 - 첫번째 배열의 요소에는 현재 값을, 두번째 요소는 상태를 변경하는 (setter)-function을 반환합니다 const [data, setData] = useState('초기값') - state는 어떤 타입이던 상관 없습니다. (str, number, object) - state는 여러개 일 수도 있습니다. - st..

1. 리액트 - 리액트는 자바스크립트 라이브러리 입니다. - 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리 입니다. - SPA란? - Single Page Application의 줄임말 입니다. - index.html하나만 로드하고 실행시키는 구조입니다. - 어떻게? - 번들러(Webpack)가 이 모든것을 해줍니다. Webpack이란 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 하나로 묶어서 조합하여 경량화 하여 결과물을 만들어 주는 도구입니다. - 번들러는 node.JS를 통해 직접 설정 할 수 있지만, 리액트 프로젝트를 생성시 자동으로 포함됩니다. - DOM (Document Object Model) 이란? - HT..