JS/React10

• 

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

• 

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

• 

  React Hook Reducer Reducer useState의 사용을 외부에서 사용 할 수 있게 해주는 useReducer useReducer(외부에서 사용할 리듀서함수, 리듀서의 초기값) const[state, func] = useReducer(myReducer, {value:0}); state의 변경을 외부에서 제어 할 수 있음 일반 예제 1번 예제 실제 주석 처리된 부분이 있어도 사용이 가능하지만 state 대신에 reducer를 통해서 외부의 정의 된 기능을 가져올 수 있기 때문에 외부에 정의를 해주었다. 1번 예제와 2번 예제 모두 ReducerComponent에 정의된 함수를 타고 들어와서 리렌더링을 해준다. Reducer 같은 경우에는 console.log를 통해 사용하고자 하는 값을 잘 확인하면서 사용하는 것을 추천한다.. JS/React 2023. 1. 18.

• 

  React Hook Ref Ref 특정 태그에 이름달기 useRef() useRef(초기값) const 사용할이름 = useRef(null); 이벤트를 사용하다 보면 특정 태그에 접근해서 핸들링 하는 경우가 생김 arrow function에 event 매개변수를 이용해서, 자신 태그에는 접근할 수 있지만, 다른태그는 핸들링 하기가 어려움 이런 경우 useRef() 훅을 이용해서 특정태그에 이름을 지정하고 핸들링 할 수 있음 일반 예제 숨기기 버튼 클릭 시 HookEffect 전체 숨기고 다시 꺼내는 기능 import { useEffect, useState } from "react"; import HookEffect from "./hook/HookEffect"; import HookRef from "./hook/HookRef"; i.. JS/React 2023. 1. 18.

• 

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

• React Iteration Components (컴포넌트 반복) IterationComponents 목록 요소들을 반복처리 할때는 map함수를 이용 합니다. 반복 컴포넌트에는 반드시 key props를 전달해야 합니다. map 함수는 실행한 결과를 가지고 새로운 배열을 만들 때 사용 array.map(callbackFunction(currenValue, index, array), thisArg) currenValue: 현재값 index: 현재인덱스 arrayt: 현재배열, thisArg: callbackFunction 내에서 this로 사용될 값 filter - 요소개수만큼 반복하며 boolean을 이용한 새로운 list를 만듬 array.filter(callbackFunction(currenValue, index, array), thisArg) currenValue.. JS/React 2023. 1. 17.

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

• 

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

• React 컴포넌트 & 프롭스 (Components & Props) 컴포넌트(Components) 화면의 부분부분을 재활용해서 사용하기 위해, 자식 요소로 만든다. App에서 자식을 만들고, 그 자식에서 또다시 부분부분을 컴포넌트로. ->전체화면을 리렌더링하는걸 피하기 위해 변경하고 싶은 부분을 하나하나 자식컴포넌트로 만들고, 그 부분에서 재활용할 부분을 자식요소로. 컴포넌트는 만들 때 앞글자를 대문자로 만드는 것이 규칙이다. 모듈내보내기 - 외부에서 사용할 모듈 이름을 지정한다. - export default 이름 모듈불러오기 - 부모컴포넌트에서 사용한다. import 이름 from 경로; 컴포넌트는 함수형, 클래스형 2가지이다. 함수형 const MyComponent2 = () => { return 함수형 컴포넌트; }; export default MyComponen.. JS/React 2023. 1. 16.

• React JS 개념 리액트 시작하기 -프론트앤드인데, 백앤드랑 섞여서 많이 사용됨. +)리액트는 처음 페이스북에서 만들어졌다. 배워야하는 이유 1.차별화 2.전자정부프레임워크(우리나라 표준. 나라 관련 사업은 전부 이것 사용. 사용하면 세금감면.)-eGovFrame : spring으로 만들어져있음. ->v4.1 베타 버전이 22년 12월부터 업그레이되었는데 최신 Spring, SpringBoot지원 시작, React js의 뷰 탬플릿 탑재 -->즉, 사장되지 않을 것! 3.react JS에서 파생->react Native. : 모바일 react와 비슷한 vue JS, Angular JS. 셋이 비슷하고 문법만 살짝씩 다름. - 리액트는 자바스크립트 라이브러리 이다. - 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 .. JS/React 2023. 1. 16.