728x90
728x90
useReducer란 무엇인가?React의 useReducer Hook은 상태(state) 관리를 위한 Hooks으로 복잡한 상태 로직을 처리하거나 여러 상태 값을 다뤄야 할 때 유용하다. useState와 비슷한 역할을 하지만 상태 업데이트 로직이 복잡해질수록 useReducer는 훨씬 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있게 해준다. useReducer는 리듀서 패턴에 따라 상태와 상태를 변경하는 함수(reducer)를 함께 관리하여 useState보다 더 복잡한 상태 변화를 효율적으로 처리할 수 있도록 설계되었다. useState vs useReduceruseReducer와 useState는 모두 상태를 관리하는 데 사용되지만 사용 사례가 다를 수 있다.useState: 간단한 상태 관리에..
useRef란 무엇인가?React의 useRef Hook은 참조(ref)를 통해 DOM 요소나 컴포넌트 상태 값을 유지하는 데 중요한 역할을 한다. useRef는 주로 DOM 요소에 직접 접근, 불필요한 재렌더링 방지, 상태 값 유지 등의 상황에서 유용하게 사용된다.useRef는 변경 가능한 객체를 반환한다. 이 객체의 .current 프로퍼티에 값을 저장할 수 있으며 이는 컴포넌트가 다시 렌더링되더라도 값이 유지된다. 일반적으로 DOM 요소에 접근하거나 렌더링 사이에서 값을 기억하는 데 사용된다.ref 객체: useRef는 { current: null } 형태의 객체를 반환하며 이 객체는 렌더링 사이에서 값이 유지된다.DOM 접근: ref는 DOM 요소에 직접 접근할 때 주로 사용된다. ref를 통해 ..
useEffect란 무엇인가?React의 useEffect Hook은 컴포넌트가 렌더링된 이후에 실행해야 하는 부수 효과(side effects)를 처리하는 데 매우 중요한 역할을 한다. useEffect는 주로 데이터 페칭, DOM 조작, 구독 및 타이머 설정 등과 같은 비동기 작업이나 기타 비정규적인 작업을 관리하기 위해 사용된다.클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드들을 함수형 컴포넌트에서 대체하기 위한 용도로 도입되었다.useEffect 사용방법useEffect는 렌더링 이후에 비동기적으로 실행되며 두 가지 개념을 포함한다.렌더링 후 실행: useEffect는 DOM이 화면에 완전히 렌더링된 ..
문제 설명정수 n이 매개변수로 주어질 때, n 이하의 홀수가 오름차순으로 담긴 배열을 return하도록 solution 함수를 완성해주세요.제한사항1 ≤ n ≤ 100입출력 예nresult10[1, 3, 5, 7, 9]15[1, 3, 5, 7, 9, 11, 13, 15]입출력 예 설명입출력 #1 10 이하의 홀수가 담긴 배열 [1, 3, 5, 7, 9]를 return합니다. 입출력 #1 15 이하의 홀수가 담긴 배열 [1, 3, 5, 7, 9, 11, 13, 15]를 return합니다.풀이 코드 및 설명for 반복문을 통해 i를 0부터 n까지 반복i % 2를 통해 1이면 홀수이므로 answer 배열에 추가function solution(n) { var answer = []; for (l..
React는 UI를 선언적으로 관리할 수 있는 컴포넌트 기반 라이브러리이다. 그 중에서도 상태(State)는 동적인 데이터를 관리하는 데 중요한 역할을 한다. 이때 상태를 쉽게 관리할 수 있도록 도와주는 것이 useState 훅이다. useState란 무엇인가?useState는 함수형 컴포넌트에서 상태를 관리하기 위한 React hook이다. React 16.8 버전에서 등장한 이 훅은 기존의 클래스형 컴포넌트에서 상태를 관리하던 방식에서 벗어나 함수형 컴포넌트에서도 쉽게 상태를 선언하고 변경할 수 있게 한다.const [state, setState] = useState(initialState);/* state: 현재 상태의 값을 저장하는 변수setState: 상태를 변경하는 함수initialState:..
React Hooks란?React Hooks는 리액트 16.8 버전에서 도입된 기능으로 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle)를 관리할 수 있도록 해준다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하며 복잡한 상태 로직을 보다 간결하고 직관적으로 다룰 수 있게 해준다.함수형 컴포넌트 함수형 컴포넌트는 간단한 형태의 컴포넌트로, 클래스형 컴포넌트보다 작성하기 간편하다. 훅스를 사용하면 함수형 컴포넌트에서 상태와 생명주기를 관리할 수 있다.Hooks 사용 훅스는 use로 시작하는 함수들로 리액트에서 제공하는 내장 훅스와 사용자 정의 훅스가 있다. 내장 훅스는 리액트에서 제공하며 사용자 정의 훅스는 개발자가 필요에 따라 만들 수 있다.Hook 규칙..