데이터를 전역으로 관리하자 ContextAPI or Redux API문서 https://ko.reactjs.org/docs/context.html React를 하다보면 여러 컴포넌트를 거쳐서 자료를 전달해야 하거나, 동시에 같은 자료를 사용해야 하는 경우가 생깁니다. Context는 리액트 컴포넌트 간에 어떠한 값을 공유 할 수 있게 해주는 기능입니다. 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용합니다. Props로만 데이터를 전달하는 것은 한계가 있다. 리액트 에서는 일반적으로 컴포넌트에게 데이터를 전달해 주어야 할 때 Props를 통해 전달합니다. 그런데, 이 컴포넌트의 형태가 복잡하다면 어떻게 될까요?

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

리액트 스타일링 1. 태그에 직접 지정하기 2. 일반 css파일로 적용하기 3. css모듈로 적용하기 css파일 이름 규칙 컴포넌트의 이름을반드시 포함해서 만들거나 똑같이 만듭니다. EX) App.js - App.css 1. 태그에 직접 디자인을 적용 할 때는 {}로 묶어줍니다 css속성중 - 은 카멜표기법으로 대체됩니다. style={{css속성: 값, css속성: 값}} 안녕하세요!! 2. 일반CSS문법으로 디자인을 해주면 되고 import로 가져오면 됩니다. 3. CSS모듈사용하기 파일은 컴포넌트명.module.css 형식으로 만듭니다. css파일은 import구문으로 가져옵니다. 이 방식은 선택자에 고유한 해시값을 부여함으로 다른파일과 디자인의 중복을 막아줍니다. :global 키워드를 이용해서 ..

훅(HOOK) 이란? https://ko.reactjs.org/docs/hooks-reference.html Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉩니다. 리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다. (useState, useEffect 등) 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. 훅의 규칙 최상위 에서만..

목록 요소들을 반복처리 할때는 map함수를 이용 합니다. 반복 컴포넌트에는 반드시 key props를 전달해야 합니다. map함수는 실행한 결과를 가지고 새로운 배열을 만들 때 사용 array.map(callbackFunction(currenValue, index, array), thisArg) currenValue: 현재값 index: 현재인덱스 arrayt: 현재배열, thisArg: callbackFunction 내에서 this로 사용될 값 예제 1) IterationComponent.js const IterationComponent = () =>{ //1. 반복처리 const arr = [1,2,3,4,5]; /* const newArr = arr.map(function(item,index,arr..

이벤트 핸들링 이벤트 규칙 이벤트의 이름은 전부 카멜 표기법으로 표현됩니다. onkeyup -> onKeyUp 이벤트를 전달할 때는 {함수} 형태로 사용합니다 인풋값 핸들링 해보기 인풋의 값이 변화되는 이벤트 onChange 연결 이벤트 안 첫번째 매개변수에서 event객체 활용하기 (e.target.속성값) setter를 이용해서 state변경하기 예제 ) 예제 1) 변화하는 인풋 값에 따른 결과값 변경 import { useState } from "react"; const EventComponent = () => { //121p //name을 저장할 useState const [name,setName] = useState(''); //이벤트 함수의 첫번째 매개변수에 이벤트에 대한 정보를 넣어줍니다. ..

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

https://goddaehee.tistory.com/300 props ( properties 프로퍼티의 줄임말 ) - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.) - 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.) 1. 상위 컴포넌트에서 하위 컴포넌트로 전달하는 매개변수 2. 객체 형태로 전달되기 때문에 {}로 값을 받습니다. 3. props은 읽기전용입니다.(값은 부모에서 바꿔서 전달합니다.) 사용방법 - 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 사용방법 1 App.js import { Fragment } from "react"; import MyCom..