ContextAPI or Redux API문서 https://ko.reactjs.org/docs/context.html React를 하다보면 여러 컴포넌트를 거쳐서 자료를 전달해야 하거나, 동시에 같은 자료를 사용해야 하는 경우가 생김 Context는 리액트 컴포넌트 간에 어떠한 값을 공유 할 수 있게 해주는 기능 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용 https://olaf-go.medium.com/context-api-vs-redux-e8a53df99b8 Context API vs Redux 닭잡는데 소잡는 칼 쓰지말자 olaf-go.medium.com https://youtu.be/QZcYz2NrDIs ContextAPI Props로만 데이터를 전달하는 것은 한계 ..
Ajax AJAX ( Asynchronous Javascript and XML)는 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술 웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 ajax기법을 사용 이 작업은 시간이 오래 걸릴 수도 있기 때문에 비동기적으로 처리하게 됨 비동기(asynchronous): 요청이 끝날 때 까지 기다리는 것이 아니라, 동시에 여러 작업을 수행, 순서 보장X 나중에 react에서는 다른 서버의 REST API와 통신을 이용하여 데이터베이스 데이터를 가져올 수 있음 2023.01.06 - [클라이언트/JavaScript] - [JavaScript] AJAX, API, fetch, Promise, then, json, xml [JavaScript] AJAX, ..
SPA 하나의 페이지로 만들어진 어플리케이션 작은 규모 만드는게 특화되어 있음 SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 이용(비동기)해서 처리 브라우저에서 사용자가 상호작용 하면 필요한 부분만 업데이트 해서 처리 ▶ 기존은 전체 렌더링 멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됨 SPA의 단점 앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래걸리게 됨 브라우저에서 렌더링이 완료되기까지 비어있는 화면이 나오게 됨 그래서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리함 (웹팩 설정 필요) vs 리액트는 클라이언트 = CSR 라우팅 브라우저의 주소상태에 따라 다양한 화면을 보여주도록 처리하는 것 사용이..
react의 css 리액트 스타일링 태그에 직접 지정하기 일반 css파일로 적용하기 css모듈로 적용하기 css 적용순서 1. 파일 만들기 컴포넌트 파일명과 똑같이 만들어줘야 함 EX) App.js - App.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/App.css'; //일반css파일로 디자인 ......생략 3. CSS모듈 사용 파일은 컴포넌트명.module.css 형식으로 만듦 css파..
Component 반복 목록 요소들을 반복처리 할 때는 map 함수 이용 반드시 key props를 전달해야 함 전달하지 않으면? 1.함수형에서는 error 2.클래스형에서는 안 나옴 map의 사용 callback의 return에 실린 값(연산 결과를 처리해서)으로 새로운 배열을 만들 때 사용 map ( item => item * 10 (조건) ) ↘ func 매개변수 1개 map ( (item, index) => item * 10 (조건) ) ↘ func 매개변수 2개 2023.01.12 - [클라이언트/React] - [React] ES6 문법(let, const), spread operator, Destructuring assignment, for of문, Backtick, Arrow Functio..
state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미 state가 체인지 되면 변화를 감지하여 리렌더링을 수행 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다름 함수형 컴포넌트에서는 훅 Hook 개념을 이용해서 더욱 쉽게 사용 가능 state는 어떤 타입이건 상관x (str, number, object) state는 여러개 가능 state는 직접 수정x (setter 사용) 강제로 수정하면 리렌더링이 들어가지 X useState(초기값) - 함수형 컴포넌트 const [data(데이터), setData(함수)] = useState('초기값') 배열 반환 첫번쨰 배열 요소: 현재값=데이터값 두번째 배열 요소: 상태를 변경하는 (setter) 반환 useState: 데이터의 초기값..
React 자바스크립트 라이브러리 API는 라이브러리의 사용방법 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리 라이브러리들이 하나씩 합쳐져서 뼈대를 이루고 있는게 프레임워크 첫페이지만 가져와서 수정이 있으면 그 부분만 change 해줌 = 이런것을 react의 virtual dom이 해줌 React git에서 가져오기 node.js 설치하고 설치하고, git으로 pull 당긴 후, npm install - node.js 만들기 npm start - node start로 시작 SPA Single Page Application - 화면 하나만 가지고 처리하는 구조 어떻게? 번들러(Webpack)가 해줌 node.js를 통해 직접 설정할 수 있음. 그러나 리액..
class class 구조 일반HTML에서는 굳이 class를 사용하진 않습니다. React의 class컴포넌트를 사용한다면 알아두세요. 객체변수 멤버변수: let, var 안써도 됨, 멤버변수는 선언하지 않아도 this.변수명 사용하면 자동생성 됨 생성자: 자바스크립트 생성자는 반드시 1개 constructor(a) { this.a = a; } 함수: 변수 타입 안 적음 constructor(a) { this.a = a; } class 상속 super로 반드시 연결 프로그래머가 생성자를 만들어주면 부모의 생성자와 반드시 연결 필요 set, get, static 같은 키워드로 함수를 설정 가능 set - 값을 저장하는 용도의 메서드 get - 값을 조회해서 가지고 나오는 메서드 module export ..
JS ES6 문법 기본문법 - 리액트 쓰려면 사용 let { } 스코프, 중복 선언x var 대신 사용 - var는 함수 스코프 (차이 알기) 더보기 1. let 변수는 { } 스코프 2. var 변수는 함수 스코프 목록1 목록2 목록3 목록4 예제에서 { }라서(함수 스코프가 아니어서) i를 기억하고 있음 var 변수 console.log(i); //4가 나옴 3. var 변수는 함수 스코프 - 즉시 실행 함수로 묶어서 var i를 함수 스코프로 바꿈 목록1 목록2 목록3 목록4 즉시 실행 함수로 묶으면서 함수 안에서만 기억되므로 = var 변수를 지역변수로 만들어 줘서 제대로 된 결과값 나옴 4. let 변수는 { } 스코프 - { } 안에서만 기억함 목록1 목록2 목록3 목록4 제대로 된 결과값 나..