목록분류 전체보기 (96)
Will find a way

들어가기 전에학원에서 프로젝트를 하면서 React를 사용하게 됐는데 React의 가상 DOM의 높이값을 가져와야 할 때가 있었다. 일반 JS라면 tag에 접근하고 싶을 때 getElementById 또는 querySelector 를 사용하면 된다. 하지만 코드는 위에서 아래로 실행하기 때문에 React에서 내가 알던 기존의 방법으로는 태그를 참조할 수가 없었다. 그렇게 공부하던중 useRef라는 React에서 사용하는 Hook을 알게 됐다. useRef는 사용하는 방법도 매우 간단하기 때문에 짧게 알아보도록 하자 useRef란?useRef는 태그의 접근할 떄 사용할 수 있는 리액트 hook 중 하나다. 사용방법 및 예제import { useRef } from 'react';function App() { ..

목차1. Context API 란?2. Context API를 사용하는 이유?3. 사용방법 및 실행 예제 1. Context API 란?React Context는 Component 트리 전체에 props를 전달하지 않고도 Component 데이터를 제공하는 방법이다.Context를 사용하면 props를 사용하지 않고도 상태변수에 접근이 가능하다. 2. Context API 를 사용하는 이유리액트에서 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 흐른다. 그러기 위해서 우리는 지금까지 props를 사용하여 부모 컴포넌트에서 직계 자식 컴포넌트로 데이터를 전달했다. 하지만 props로 상태를 전달하면 계속적으로 중간 컴포넌트를 거쳐야하는 불편함이 있다. (이러한 것을 'Prop Drilling' 이..

목차1. useMemo 란?2. useMemo 사용법3. useMemo 사용 예제4. 결론 및 요약 1. useMemo 란useMemo는 리액트에서 사용하는 hook 중에 하나로 컴포넌트 성능을 최적화 해준다.그럼 어떻게 컴포넌트의 성능을 최적화 해준다는 걸까? 좀 더 자세히 알아보자. useMemo를 알기위해서는 memoization을 알아야한다. 메모이제이션을 검색하면 다음과 같이 정의가 나온다.메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다.- 나무위키 참고메모이제이션을 이용하는 hook은 useMemo..

1. useState 란?리액트 16.8 이전 버전에는 함수형 컴포넌트에서 상태를 관리할 수 없었는데, 리액트 16.8 에서 Hooks 라는 기능을 도입하고 함수형 컴포넌트에서 상태를 관리할 수 있게 됐다. 상태관리를 하는 Hook 중에 가장 기본이 되는 것 중에 하나가 useState이다. 2. useState의 사용법1. 상단에 useState 함수를 import 한다.import { useState } from 'react';2. 배열 구조분해를 사용하여 [something, setSomething] 과 같은 state 변수의 이름을 지정한다.const [state, setState] = useState(1);3. state는 상태값이고, setState 함수는 상태값을 바꿔준다. 3. useSt..

Link 컴포넌트란?Link 컴포넌트는 리액트에서 사용하는 페이지 이동을 하기 위한 컴포넌트이다.우리는 리액트를 접하기 html 을 이용하여 태그를 만들었다.HTML 에서는 a 태그를 이용하여 페이지 이동을 했는데 왜 굳이 Link 컴포넌트가 있을까? Link 컴포넌트와 a태그의 차이Link 컴포넌트를 이용하면 페이지가 새로고침이 되지 않고 자연스럽게 페이지를 이동할 수 있고 더 빠르다.이러한 특징으로 마치 어플을 사용하는 느낌을 준다. 반면에 a 태그를 이용하여 새로고침이 되면서 페이지를 이동하기 떄문에 페이지 이동이 느리며 끊기는 듯한 느낌을 준다.사용자 입장에서는 Link 컴포넌트가 사용하는데 있어서 더 편리함을 느낄 것이다.그럼 이제 Link 컴포넌트를 어떻게 쓰는지 알아보자. Link 컴포넌트 ..

이번글에서는 React의 class 컴포넌트와 setState를 이용하여 state의 숫자가 1씩 증가하는 함수를 만들어 보자.(리액트의 상태변화를 중점을 두어서 CSS는 별도로 올리지 않았다.) index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );reportWebVitals(); create-react-app 을 실..
CRA 란?Create React App 의 약자로 리액트 앱을 설치해주는 뜻으로npx create-react-app 프로젝트명 의 명령어로 설치를 할 수 있다. CRA 구성public : 정적 파일들을 모아 놓는 폴더src : 소스코드를 모아두는 폴더 (동적인 파일도 포함) | src/index.js : react의 루트 파일 테스트 환경 실행npm start : 메모리 상에 빌드 내용을 가지고 기본적으로 3000번 포트에 테스트환경을 구축한다. 빌드 운영 배포npm run build src/index.jsconst root = ReactDOM.createRoot(document.getElementById('root'));root.render( ); React.StricMode : 로그 조..

목차1. Webpack2. JSX 없이 React 구현 (코드 설명) 1. WebpackWebpack(웹팩)이란 모듈 번들러라고 할 수 있다. 모듈 번들러라는 것은 "여러 개로 나누어져 있는 파일들을 하나의 파일로 묶어준다."는 개념이다. 그럼 이 webpack(모듈 번들러)이 왜 필요한것일까? - webpack(모듈 번들러)이 필요한 이유위에서 webpack이 파일들을 합쳐준다는 것을 명시했다. 이것을 왜 사용할까?1. 하나의 파일만 받으면 되기 떄문에 반응속도가 빨라질 수 있다.2. 모듈 단위의 코딩이 가능하여 가독성 및 유지보수에 용이하다.3. ES6 버전 이상의 스크립트를 사용할 수 있다. (Webpack의 Babel-loader 사용시 ES5 문법으로 바꿔주기 때문에 브라우저가 호환이 가..
1. React CDN바닐라 자바스크립트로 리액트를 사용하기 위해서는 CDN 링크가 필요하다. 출처 : https://ko.legacy.reactjs.org/docs/cdn-links.html CDN 링크 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org 세번째 줄은 바벨(Babel)을 포함하고 있다. 바벨의 역할은 자바스크립트 ES6 문법으로 ES5 문법으로 트랜스파일 해주는 중요한 역할을 한다. 바벨과 웹팩(Webpack)은 리액트에서 중요한 역할을 담당하고 있다. 다음에 한번 포스팅할 예정이다. 2. HTML 3. Javascript 여기서 주의!React는 상태(State)가 변해야 리렌더링을 해준다...

목차1. React란?2. 탄생 배경3. React의 특징4. 가상 돔(Virtual DOM), props, state, JSX 1. React란?React는 프론트 엔드 라이브러리잠깐 프렘임워크와 라이브러리의 차이를 간단하게 알아보자.프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜서 넣으며,라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이라고 할 수 있다. (프레임 워크 : 디렉터리 구성이 있음 / 라이브러리 : 디렉터리 구성 없음) 2. React 탄생배경SPA(Single Page Application)앱을 사용하는 것같은 사용감이 있는 웹페이지 SPA(Single Page Application)의 이전 세대에는 자바스크립트의 DOM ..