개발의 시작과 끝

Bootstrap 부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다. '프레임워크' 라고 하는 것은 재사용이 가능한 요소들의 집합되어 있으며, 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. jquery는 라이브러리이고, 부트스트랩은 프레임워크다. 따라서, 우리는 '부트스트랩 프레임워크에서 jquery 라이브러리를 사용할 수 있다.'라고 말 할 수 있다. 참조 - ict-nroo.tistory.com/21

useRef useRef Hook은 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해준다. 리액트를 개발하다 보면 DOM에 직접적인 접근을 해야 할 때가 있는데 이때 ref를 사용한다. input / textarea 등에 포커스를 해야 할때 특정 DOM 의 크기를 가져와야 할 때 특정 DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때 외부 라이브러리 (플레이어, 차트, 캐로절 등) 을 사용 할 때 또한, 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리할 수도 있다. Average 컴포넌트에서 등록 버튼을 눌렀을 때 포커스가 input 안쪽으로 넘어가는 코드 Average.js import React, { useState, useMemo, useRef } from 'react'; cons..

useCallback useCallback은 useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다. useMemo에서 구현한 Average 컴포넌트를 보면, onChange와 onInsert라는 함수를 선언했는데, 이렇게 선언하게 되면 컴포넌트가 리렌더링 될 때마다 이 함수들이 새로 생성된다. 대부분은 이러한 방식이 문제가 되지 않지만, 컴포넌트의 렌더링이 자주 발생하거나, 렌더링해야 할 컴포넌트의 개수가 많아진다면 이 부분을 최적화해주는 것이 좋다. Average.js import React, { useState, useMemo, useCallback } from 'react'; cons..

useMemo useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 리스트에 숫자들을 추가하면 해당 숫자들의 평균을 나타내는 함수형 컴포넌트 Average.js import React, { useState } from 'react'; const getAverage = numbers => { console.log('평균값 계산중..'); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = useState([]); const [number, s..

useReducer useReducer는 useState보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook이다. reducer는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수이다. reducer 함수에서 새로운 상태를 만들 때는 꼭 불변성을 지켜주어야 한다. function reducer(state, action) { return { ... }; // 불변성을 지키면서 업데이트한 새로운 상태를 반환합니다 } 액션 값은 주로 다음과 같은 형태로 이루어져 있다. { type: 'INCREMENT', // 다른 값들이 필요하다면, 추가로 들어감 } Redux에서는 액션 객체는 어떤 액션인지..

useContext 이 hook을 사용하면 함수형 컴포넌트에서 Context를 보다 쉽게 사용할 수 있다. 여기서 Context는 주로 전역적으로 데이터가 사용돼야 할 때 사용된다. ContextSample.js import React, { createContext, useContext } from 'react'; const ThemeContext = createContext('black'); const ContextSample = () => { const theme = useContext(ThemeContext); const style = { width: '24px', height: '24px', background: theme }; return ; }; export default ContextSamp..

useEffect useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate를 합친 형태로 봐도 무방하다. useEffect(() => { console.log('렌더링이 완료되었습니다!'); console.log({ name, nickname }); }); 마운트 될 때만 실행 만약 useEffect에서 설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트할 때는 실행할 필요가 없는 경우엔 함수의 두 번째 파라미터로 비어있는 배열을 넣어주면 된다. useEffect(() => { console.log('마운트 될 때만 실행됩니다.'); }, ..

useState 가장 기본적인 훅으로서, 함수형 컴포넌트에서도 가변적인 형태를 지니고 있을 수 있게 해준다. 컴포넌트에서 동적인 값을 상태(state)라고 한다. 리액트에서는 이러한 동적인 값의 상태를 관리하기 위해 useState라는 함수를 쓴다. 함수형 컴포넌트에서 상태를 관리해야 하는 일이 발생한다면 이 Hook을 사용하면 된다. Counter.js import React, { useState } from 'react'; const Counter = () => { // 비구조화 할당 문법 // ()안에는 기본값(초기값) const [value, setValue] = useState(0); return( 현재 카운터 값은 {value} 입니다. setValue(value + 1)}>+1 setValu..