프론트엔드63 리액트를 다루는 기술, ref: DOM에 이름달기 HTMl에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref(reference의 줄인말)개념 더보기 리액트 컴포넌트 안에서도 id를 사용할 수는 있지만 JSX안에서 DOM에 id를 달면 해당 DOM을 렌더링할때 그대로 전달됨 하지만 특수한 경우가 아니면 사용을 권장하지 않음 HTML내에서는 DOM의 id는 유일해야하는데 중복id를 가진 DOM이 여러개 생기는 잘못된 사용이기 때문 ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이러한 문제가 생기지 않음 대부분 id를 사용하지 않고도 원하는 기능을 구현할 수 있지만 다른 라이브러리나 프레임워크와 함께 id를 사용해야하는 상황에는 컴포넌트를 만들때마다 id 뒷부분에 추가 텍스트를.. 2023. 6. 17. 리액트를 다루는 기술, 이벤트 핸들링 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 함 [ 4.1 리액트의 이벤트 시스템 ] 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷함 ▶ 4.1.1 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성 HTML: onclick → React: onClick 이벤트에 실행할 JS 코드를 전달하는 것이 아닌, 함수 형태의 값을 전달 화살표 함수 문법으로 함수를 만들어 전달 렌더링 부분 외부에 미리 만들어서 전달 DOM 요소에만 이벤트를 설정할 수 있음 DOM 요소에는 이벤트를 설정할수 있지만 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음 ▶ 4.1.2 이벤트 종류 리액트에서 지원하는 이벤트의 종류중 몇개 Cli.. 2023. 6. 17. 리액트를 다루는 기술, 컴포넌트 리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러가지 컴포넌트로 구성되어 있음 컴포넌트의 기능은 단순한 탬플릿 이상임 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날때 주어진 작업들을 처리할 수 있으며 임의 메서드를 만들어 특별한 기능을 붙여 줄 수 있음 [ 3.1 클래스형 컴포넌트 ] 클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것 클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고 그 안에서 보여 주어야 할 JSX를 반환함 i.. 2023. 6. 11. 리액트를 다루는 기술, JSX [ 2.1 코드 이해하기 ] //App.js import React from "react"; import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 리액트 프로젝트를 만들때 node_modules라는 디렉터리도 함께 생성됨 프로젝트 생성과정에서 node_modules 디렉터리에 react 모듈이 설치됨 그것을 import 구문을 통해 리액트를 불러와서 사용할 수 있음 import React from "react"; 모듈을 불러와서 사용하는 것은 원래 브러우저에서는 없는 기능 브러우저가 아닌 환경.. 2023. 6. 11. 리액트를 다루는 기술, 리액트 시작 [ 1.1 왜 리액트인가? ] 자바스크립트(JS)만을도 규모가 큰 애플리케이션을 만들 수 있는 시대가 왔음 애플리케이션을 특별한 도구 없이 순수하게 JS만관리하려면 불편하기 때문에 이를 도와줄 수많은 프레임워크가 조금씩 다른 관점에서 이를 해결하려고 노력해 왔음(Angular, PureMVC, Vue.js 등) 이 프레임워크들은 주로 MVC(Model-View-Controller) 아키텍처, MVVC(Model-View-View-Controller) 아키텍처를 주로 사용함. AngularJS의 경우에는 MVW(Model-View-Whatever)) 아키텍처로 애플리케이션을 구조화 MVC, MVVM, MVW 등과 같은 여러 구조가 지닌 공통점은 모델(Model)과 뷰(View)가 있다는 것 모델은 애플리케.. 2023. 6. 10. React, async sync / async 관련 상식 JS는 synchronous(동기방식)하게, 즉 순서대로 코드가 실행됨 문제는 JS는 몇몇 함수(ajax, 이벤트리스너, setTimeout 등)를 사용하면 asynchronous(비동기적)하게 코드가 실행됨 이런 함수들은 처리시간이 오래걸리기 때문에 코드들이 순차적으로 실행되지 않고 완료되면 실행됨 ajax등의 요청이 0.00초가 걸려도 물리적으로 처리가 보류되어 나중에 실행되는것 리액트의 setState 함수에 주의해야 하는 점 function App(){ let [name, setName] = useState('Lee') } setName() 같은 state 변경함수들은 전부 asynchronous (비동기적)으로 처리됨 state 변경함수가 오래 걸리면 다른 밑에.. 2023. 3. 30. React, PWA PWA Progressive Web App 줄여서 PWA 웹사이트를 안드로이드/iOS 모바일 앱처럼 사용할 수 있게 만드는 일종의 웹개발 기술 React를 이용해 만든 웹사이트를 모바일 앱으로 발행해서 쓰자는 의도 다만 iOS, Android 앱으로 발행하는게 아니라 웹사이트 자체를 스마트폰 홈화면에 설치하는 것 PWA 장점 스마트폰, 태블릿 바탕화면에 웹사이트를 설치 가능 다운받은 앱을 누르면 상단URL바가 제거된 크롬 브라우저가 떠서 일반 사용자는 앱이랑 구분X 오프라인에서도 동작할 수 있음 service-worker.js 라는 파일과 브라우저의 Cache storage로 오프라인에서도 동작할 수 있음 덕분에 게임만들 때 유용 설치 유도 비용이 매우 적음 앱설치를 유도하는 마케팅 비용이 적게들어감 앱.. 2023. 3. 30. React, batching과 useTransition 그리고 useDeferredValue(성능개선) 일관된 batching 리액트 18버전부터 일관된 batching을 지원 automatic batching 이라는 기능이 있는데 state변경함수를 연달아서 여러개 사용하면 재렌더링도 여러개되어야 하지만 리액트는 재렌더링을 마지막에 1회만 처리 이렇게 일종의 쓸데없는 재렌더링 방지기능을 batching이라고 함 setName("HE") setAge(19) setCount(0) 리액트 17버전까지는 ajax요청, setTimeout 등등의 안에 있는 state변경함수가 있는 경우 batching이 일어나지 않았지만 리액트18버전부터는 일관적이게 어디있든간 재렌더링이 마지막 1번만 됨 만약 automatic batching을 원하지 않는 경우 flushsync()을 이용 flushsync()는 비동기적인 코.. 2023. 3. 28. React, 재렌더링을 막는 memo, useMemo(성능개선) memo 컴포넌트가 재렌더링되면 안에 있는 자식컴포넌트는 항상 함께 재렌더링됨 이런경우 자식컴포넌트가 무겁다면 부모컴포넌트가 재렌더링될 시 렌더링시간이 긴 문제가 될 수 있음 예시로 부모컴포넌트에 버튼을 누를때마다 렌더링으로 인해 1초마다 버벅거리는 불상사가 벌어질수도 있는것 import {memo, useState} from 'react' let Child = memo( function(){ console.log('재렌더링됨') return Child }) function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + ) } 상단에 memo를 import 원하는 컴포넌트 정의부분을 감싸기 컴포넌트를 감쌀때는 .. 2023. 3. 23. 이전 1 2 3 4 5 6 7 다음
