안녕하세요~ totally 개발자입니다. 리액트(React), 타입스크립트(Typescript), Webpack, Babel 초기 설정에 대해서 살펴보도록 하겠습니다. 오늘 살펴볼 리액트, 타입스크립트, 웹팩, 바벨의 용도는 아래와 같습니다. 리액트(React) 자바스크립트 라이브러리 타입스크립트(Typescript) 자바스크립트의 확장 언어로 자바스크립트에 타입 등을 부여할 수 있고 엄격한 문법을 사용하도록 지원 웹팩(Webpack) 애플리케이션을 위한 필요한 모든 파일(모듈)을 병합하여 하나의 번들(결과물)로 생성해주는 도구 바벨(Babel) ES6 이상의 자바스크립트 문법을 ES5 형태 즉 모든 브라우저에서 지원할 수 있도록 컴파일해주는 도구 초기 세팅을 위해 기본적으로 VScode, yarn, n..

안녕하세요~ totally 개발자입니다. useMemo 오늘 다뤄볼 부분은 useMemo 훅입니다. useMemo는 useCallback과 유사합니다. useMemo와 useCallback 모두 Memoization을 활용하는 훅으로, Memoization은 이전에 이미 수행했던 계산의 결과값을 이미 다른 곳에 저장을 해두고 동일한 값이 입력될 때 재사용하는 프로그래밍 기법입니다. 그래서 성능을 높이고 최적화할 때 많이 사용됩니다. useMemo는 Memoization된 값을 반환하고 useCallback은 Memoization된 함수를 반환하는 특징이 있습니다. 바로 예제 실습을 통해 살펴보도록 하겠습니다. Step 1: Counter.js 컴포넌트 파일을 생성하여 useMemo와 useState를 i..

안녕하세요~ totally 개발자입니다. useCallback useCallback 훅에 대해서 살펴보겠습니다. useCallback은 한 번 생성한 함수를 재사용하고 그 함수가 의존하는 값들이 변경되지 않는 한 동일한 함수를 재사용합니다. 그래서 연관된 값이 변경되지 않은 상태에서 재렌더링을 막기 위해서도 사용합니다. 먼저 다음과 같은 코드가 있을 때 버튼을 눌러보면 Update 버튼 클릭할 때마다 랜더링이 다시 일어나게 되는 것을 알 수 있습니다. (3개 버튼 모두) 이번에는 Button.js로 따로 이 버튼 function를 분리해서 작성하겠습니다. 여기에서 React.memo(Button)으로 export 해줍니다. Counter.js 부분을 다음처럼 해주시면 됩니다. 9, 11, 13번째 줄에 ..

안녕하세요~ totally 개발자입니다. useReducer Hook 오늘은 useReducer 훅에 대해 살펴보겠습니다. 사실 useReducer는 useState랑 용도는 같으나 더 복잡한 로직을 처리하기 위해 사용된다고 보시면 되며 예제를 위해 div 박스를 상하좌우로 버튼을 클릭해서 움직일 수 있는 코드를 작성해보도록 하겠습니다. Step 1: 먼저 컴포넌트에 Direction.js 파일을 생성후 다음처럼 useReducer를 import 하시고 reducer 함수를 작성해줍니다. reducer에는 state 변수(업데이트할 변수명)와 action이 인자로 전달됩니다. 이것을 보통 switch를 활용하고 여기에서는 action.type (변경 가능)을 사용하여 스위치로 조건문을 만들어서 retur..

안녕하세요~ totally 개발자입니다. useRef 오늘은 useRef에 대해서 살펴보도록 하겠습니다. useRef는 상태가 변할 때마다 렌더링이 되어도 useRef의 값은 유지가 된다는 점이고 useRef의 값이 변경되더라도 재렌더링이 일어나지 않기 때문에 매우 유용하게 사용할 수 있습니다. 보통 state(상태)가 업데이트되어 다시 렌더링을 하면 내부 변수들 및 함수가 초기화되고 다시 실행됩니다. 또한 useRef는 DOM요소에 접근할 때 많이 사용됩니다. querySelector랑 거의 똑같은 역할을 합니다. 이번 시간에는 버튼을 눌렀을 때 input 태그에 focus 초점을 주도록 해보겠습니다. Step 1: UsernameComponent.js 파일을 하나 생성하고 다음처럼 코딩해줍니다. 2번..

안녕하세요~ totally 개발자입니다. Navbar, Link 오늘은 Navbar(Navigation Bar)를 Link 활용해서 만드는 방법에 대해 살펴보겠습니다. Step 1: 먼저 Header.js 파일을 작성해서 다음처럼 만들어줍니다. (생략하셔도 됩니다) Step 2: Nav.js 파일을 생성하여 다음처럼 Link를 이용한 메뉴를 구성합니다. Step 3: Nav.css 파일도 생성하여 다음처럼 스타일링 해주면 됩니다. text-decoration: none을 사용해서 anchor 태그에 기본적으로 탑재되어 있는 밑줄 표시를 제거해줍니다. Step 4: App.js에 다음처럼 업데이트해주시면 됩니다. 결과는 아래와 같습니다. 각 메뉴를 클릭하면 지정된 페이지(컴포넌트)로 이동합니다.