본문 바로가기

└ React9

CRA와 Vite 이번에 새 프로젝트를 하면서 Vite(비트; 프랑스어로 빠르다는 뜻)를 처음 사용해 보게 되었다. 좋다는 얘기는 많이 들었는데, 실제로 사용해 보니 정말 마음에 들어서 간단한 사용법 등을 정리해 보려고 한다. 먼저 기존에 사용하던 CRA에 대해 이야기해 보자면, CRA란 Create React App의 줄임말로 별도의 설정 없이 최신 빌드 설정을 할 수 있는 공식적으로 지원되는 방법이다. 편하게 프로젝트를 시작할 수 있는 좋은 방법이지만, CRA를 이용해 프로젝트를 진행하다 보면 개발 모드를 켜는데 종종 문제가 생기곤 한다. (컴퓨터 사양에 따라 문제가 없을 수도 있지만) 모드가 켜지는데 너무 오랜 시간이 걸리기도 하고, 분명 이전에 종료했는데도 포트가 사용 중이라는 문구가 뜬다거나 아예 켜지지 않는 경.. 2023. 7. 5.
useNavigate 와 Link 리액트로 개발을 하다 문득 useNavigate와 Link의 차이가 뭔지 궁금해졌다. 그동안 페이지 이동이 필요한 경우 익숙하다는 이유로 useNavigate를 주로 사용했었는데, 생각해 보니 Link도 비슷한 기능을 하는 것으로 알고 있는데 왜 굳이 두 가지 방법이 존재하는 걸까 의문이 들었다. 먼저, useNavigate는 리액트 라우터에서 제공되는 Hook이고, Link는 리액트 라우터에서 제공되는 Component이다. 리액트 라우터(React Router)란 싱글 페이지 애플리케이션을 만드는 리액트에서 화면 전환, 즉 라우팅을 위해 사용되는 라이브러리이며, 결국 두 가지 방식의 차이는 '훅이냐, 컴포넌트이냐.' 인 것이다. 공식 문서의 예제를 보면, import * as React from "r.. 2023. 6. 28.
코딩 애플 2022 리액트 복습용 정리(7) Redux Single Page Application 단점 → 컴포넌트 간 state 공유 어려움 해결법 0) props 계속 내려주기 -> 부모 - 자식 간에만 가능해서 중첩된 컴포넌트가 많을수록 번거로움 1) Context API (리액트 기본 문법) -> 성능 이슈, 컴포넌트 재사용의 어려움 등으로 잘 사용하지 X 2) Redux 등 외부 라이브러리 (참고) table의 은 가로줄 나 는 세로줄임. Redux : props 없이 state를 공유할 수 있게 도와주는 라이브러리 redux.store.js 라는 js 파일 하나에 state들을 보관할 수 있고, 이 state들은 모든 컴포넌트가 꺼내 쓸 수 있다. ● 설치하기 npm install @reduxjs/toolkit react-redux //참고로 re.. 2023. 2. 27.
코딩 애플 2022 리액트 복습용 정리(6) ajax, 탭 UI, transition 애니메이션 리액트에서 서버와 통신하려면? ajax : 새로고침 없이 GET / POST 요청을 할 수 있게 도와주는 간단한 브라우저 기능 ajax를 쓰려면 3개의 옵션 중 한 가지 방법을 사용하면 되는데, 1. XMLHttpRequest 응용2. 버튼 3번 누르면 더 이상 불러올 상품이 없다는 안내문을 띄우고 버튼 없애기 -> 응용3. 버튼을 누른 직후에 로딩 중 띄우기(요청이 성공하거나 실패하면 로딩 중 지우기) ... 시간 나면 더 구현해 보기 //POST 요청 ; 서버로 데이터를 전송 axios.post('URL', {key : 'value'}) ( + ) //ajax 요청을 동시에 여러 곳에 하고 싶다면? Promise.all( [axios.get('URL1'), axios.get('URL2')] ) //둘.. 2023. 2. 27.
코딩 애플 2022 리액트 복습용 정리(5) styled-components, useEffect styled-components 라이브러리 : 스타일을 입힌 컴포넌트를 만들 수 있음. //설치하기 npm install styled-components //사용하고자 하는 컴포넌트에 import import styled from 'styled-components' //사용 예시 let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; `; // props.bg }; // props.bg == 'blue' ? 'white' : 'black' }; 이런 식으로도 사용 가능 padding : 10px; `; let NewBtn = styled.button(Btn)` //기존 스타일 복사하는 것도 가능 text-shad.. 2023. 2. 26.
코딩 애플 2022 리액트 복습용 정리(4) 부트스트랩, import / export, 라우터 [ 부트스트랩 ] https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 라이브러리 설치 후, npm install react-bootstrap bootstrap App.js에 파일을 import. import 'bootstrap/dist/css/bootstrap.min.css'; 예제 코드를 복붙한 후, 상단에 대문자로 시작하는 컴포넌트를 import 해준다. (+) className을 이용하여 커스텀도 가능. 1) css 파일에서 src 폴더 안의 이미지를 넣고 싶을 때 ./이미지 경로 2) html 파일에서 src 폴.. 2023. 2. 26.
코딩 애플 2022 리액트 복습용 정리(3) 이벤트 버블링, <input>, onChange 이벤트, 이벤트 객체, 옛날 문법, 배포하기 잠깐! 좋아요 버튼, 즉 span 태그를 눌렀는데 모달창이 나오는 버그? 상위 html로 퍼지는 이벤트 버블링을 막고 싶을 땐, e.stopPropagation()을 작성해주면 된다. 에 무언가 입력될 때 코드를 실행하고 싶으면, onChange / onInput 사용. 에 입력한 값을 가져오려면, e 파라미터 (이벤트 객체) 추가. {condole.log(e.target.value)}}/> //여기서 target은 앞의 input 태그를 가리킨다. 에 입력한 값을 저장하려면, let [입력값, 입력값변경] = useState(''); {입력값변경(e.target.value)}}> (참고) class를 이용한 옛날 React 문법 //기본 템플릿 class Modal extends React.Compon.. 2023. 2. 24.
코딩 애플 2022 리액트 복습용 정리(2) 컴포넌트, 동적UI(모달창), map(), props 많은 div들을 한 단어로 줄이고 싶다면? → Component를 사용! Component를 사용하면 더 명시적인 코드를 작성할 수 있기 때문에 관리가 쉬워진다. 컴포넌트 만드는 법 1. function 만들고, ※ 다른 function 바깥에 만들어야 함! 즉, function App() {} 밖에 만들라는 소리임. 그리고 함수 작명을 할 때는 영어 대문자로 시작하는 것이 룰임. 2. return() 안에 html 담기 3. 쓰기 (참고) return() 안에 html 병렬 기입하려면? 이런 식으로 묶어주면 됨. (fragment 문법) (참고) 컴포넌트를 갖다 쓸 때, 이렇게 써도 되지만 이렇게 바로 써도 됨. 그럼 어떤 걸 컴포넌트로 만들면 좋을까? 1. 반복적인 html 축약할 때 2. 큰 페이지.. 2023. 2. 24.

티스토리툴바