전체 오늘 어제
본문 바로가기
안녕하세요 :) FE 개발자 윤지홍입니다.
저는 리액트를 주로 사용해요.
UX/UI디자인에도 관심이 있어요.
Javascript React NextJs NodeJs Flutter HTML CSS PHP
👋
React (9)
React + Vite + Typescript + Jest 템플릿 세팅하기 들어가기 React + Vite + Typescript + Jest로 기본 템플릿 세팅을 진행 했을때 Jest 세팅을 제외한 다른 부분은 문제가 없었는데 Typescript에 Jest를 추가해서 그런지 공식문서를 보고 세팅을 진행 했음에도 Jest세팅 하나에 무려 5시간이 넘게 걸렸다 :( 2022.10.31 추가 해당 환경 Jest대신 Cypress를 적용해서 사용해보려 했으나 Cypress에서 자체적으로 vite를 지원하지 않아서 문제가 생겼다.. Cypress에서 vite지원용 패키지를 설치해봤으나 여전히 안됨.. 1. Vite + React + Typescript 설치하기 기본적인 설치는 Vite에서 보일러 플레이트 코드가 있어 간단하게 설치할 수 있었다. $ npm init vite@latest..
2022년 11월 01일
React Hook에서의 클로저 들어가기 React Hook인 useState에서 클로저를 사용해 상태를 저장하고 관리한다고 한다.. 이제 이게 정확히 어떤 식으로 작동되는지는 알아보자 useState를 간단하게 구현해보자 간단하게 직접 구현해 보면 아래처럼 구현할 수 있지 않을까..? const useState = (initialValue) => { let val = initialValue; const state = () => { return val; }; const setState = (newVal) => { val = newVal; }; return [state, setState]; }; const App = () => { const [state, setState] = useState(0); return { change: () =..
2022년 08월 20일
React useRef 사용하기 useRef란? useRef란 원하는 특정 DOM을 직접 선택해서 컨트롤 할 수 있게 해주는 Hook이다. 예를 들면 엘리먼트의 크기를 가져오거나 스타일 변경, 포커스 등의 작업을 해야할 때 useRef를 사용하면 된다. 사용법 기본적인 사용법은 useRef로 객체를 생성하고 원하는 DOM에 ref객체를 넣어주면 ref.current가 해당 DOM을 가르키게되고 current를 사용해 DOM을 직접 조작 하면된다. import { useRef } from 'react'; const App = () => { const ref = useRef(); return ; }; 예제위에서 만든 컴포넌트를 사용해서 button 클릭 시 input 값이 초기화 되게 만들어보자. import { useRef } from ..
2022년 08월 16일
React 메모이제이션 사용하기 메모이제이션 메모제이션이란 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 저장된 값을 꺼내 쓰는 것을 말한다. React.memo React.memo는 의존하는 값들이 변경되었을 때만 렌더링이 일어난다.(React.memo는 훅이 아닌 HOC다.) 사용법 퍼포먼스 최적화를 원하는 컴포넌트를 React.memo로 감싸주기만 하면 된다. React.memo(Component); 아래 컴포넌트를 예시로 보면 props인 label과 onClick이 바뀌었을 때만 렌더링이 일어난다. import { memo } from 'react'; const Button = ({ label, onClick }) => { return {label}; }; export default memo(Button); ..
2022년 08월 16일
useEffect 사용법 SideEffect 란? 우선 리액트에서 컴포넌트가 렌더링된 이후에 처리 되어야 하는 것 들을 SideEffect라고 한다. 대표적으로 API 호출 같은 것들을 SideEffect라고 하는데 API를 호출하고 응답이 돌아올 때 까지 사용자는 아무런 화면도 볼 수 없다. 리액트에선 렌더링 할 수 있는 요소는 먼저 렌더링하고 그 외에 작업들은 비동기로 처리하는 것을 권장한다. useEffect란? 리액트에 함수형 컴포넌트에서 SideEffect를 사용할 수 있게 해주는 기능으로 우리가 useEffect에 넘긴 내용들이 컴포넌트가 렌더링된 이후에 처리될 수 있게 해준다. 그리고 리액트에선 useEffect가 실행되는 시점에 이미 DOM이 업데이트 됐음을 보장한다. 정리(Clean Up)가 없는 Effect 네..
2022년 08월 16일
React에서 불변성을 지켜야하는 이유 불변성이란? 불변성이란 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만드는 것을 말한다. JS에서의 불변성 우선 아래 코드로 자바스크립트에서 불변성에대해 알아보자. const userA = { name: '호롤롤', phone: '000-0000-0000', address: '대한민국 어딘가', }; const userB = userA; userA.name = 'ㅋㅋㅋㅋ'; console.log(userA.name); // result: 'ㅋㅋㅋㅋ' console.log(userB.name); // result: 'ㅋㅋㅋㅋ' userA.name을 변경 했는데 userB.name도 같이 바뀌었다. (불변성이 잘 지켜지지 않았다 - userA의 메모리 주소와 userB가 가르키는 메모리 주소 값이 같기때..
2022년 08월 15일
useState 사용법 사용법 기본적으로 아래와 같이 사용하면되고 사용 시엔 불변성을 꼭 지켜줘야한다. const [state, setState] = useState({ title: '호롤롤로롤', content: '공백', }); 상태 값 변경은 setState를 사용하면 된다. setState({ ...state, content: 'ㅋㅋㅋㅋㅋㅋㅋ', }); setState를 사용하지 않고 직접 값을 변경하게 되면 리액트가 render 함수를 호출하지 않아 상태가 변경되어도 렌더링 되지 않는다. 또한 리액트는 setState를 실행했을때 이전 값과 비교 후 리렌더링 여부를 판단하기 때문에 직접적으로 값을 변경해선 안된다. 참고 setState는 비동기적으로 동작한다. const [counter, setCounter] = us..
2022년 08월 13일
HOOK 이란? 훅 HOOK 이란? Hook은 React 16.8부터 추가되었고 기존 클래스형 컴포넌트에서만 사용가능하던 상태관리, 라이프사이클 메소드 등을 사용할 수 있게 해주는 기능이다. 16.8이전 버전에서는 함수형 컴포넌트 내에서 상태관리가 불가능했다. 라이프사이클 메소드 - componentDidMount, componentWillUnmount, componentDidUpdate Hook의 장점 - 코드가 간결해진다 - 가독성이 좋아진다 - HOC 헬을 벗어 날 수 있다. HOOK 사용 규칙 훅 사용시엔 리액트에서 규정한 규칙을 지켜야 코드가 정상적으로 실행되고 코드가 꼬이지 않는다. 사용 규칙은 아래와 같다. - 컴포넌트 최상위에서만 호출해야 한다. - React 함수 내에서만 호출해야 한다. - Custom..
2022년 08월 10일

티스토리툴바