본문 바로가기

Programming

 (64)
[React] React Hooks : 6. useReducer 1. useReducer 란? useState와 비슷하게 상태를 관리/수정할 때 사용하는 훅이며, Context API, useContext 와 같이 사용되는 경우가 많다. // useState const [state, setState] = useState(); // 상태, 상태변환 // useReducer useReducer(reducer, initialState); // 상태변환, 상태 1) useState와의 차이점 useReducer는 더 복잡한 로직의 상태를 관리하는데 사용되는 경우가 많다. 2) useReducer를 언제 사용해야 하는가? 2-1) useState보다 더 복잡한 로직 상태 관리가 필요할 때 2-2) Redux 사용시 2. useReducer 사용하기 dispatch가 reduc..
[etc] 매개변수(Parameter)와 인수/인자(Argument) 차이 매개변수(Parameter) 인수/인자(Argument) 함수를 생성할 때 외부로부터 받아오는 값을 의미. 함수를 호출하면서 사용하게 되는 값을 의미. // javascript // 함수 생성 function example(x,y) { // 이때 함수 example()의 괄호 안의 x,y 값이 Parameter. return x+y; }; // 함수 호출 example(x,y); // example() 함수 안의 x,y가 Argument. // react 함수형 컴포넌트 // 함수 생성 const example = (x) => { // 이때 함수 example()의 괄호 안의 x가 Parameter. return x++; }; // 함수 호출 example(x); // example() 함수 안의 x가 ..
[React] React Hooks : 5. useRef 1. useRef란? Javascript에선 특정 태그를 선택하기 위해 getElementById, querySelector와 같은 DOM Selector 함수를 사용하는데, React의 함수형 컴포넌트 내에서는 useRef를 사용한다. 현재 스크롤 바의 위치가 어디인지, 포커스 설정, 특정 엘리먼트 크기 가져오기 등의 기능 구현에 사용된다. 2. useRef 사용하기 2-1) 최상단에 useRef 선언하기 import { useRef } from 'react'; 2-2) ref 선언 후 초기화 ex) ExampleElement라는 이름의 선택자 생성 const ExampleElement = useRef(null); 2-3) useRef로 Button 이라는 내용의 div tag 클릭 시 input으로 ..
[React] React Hooks : 4. useContext 먼저 Context란? [etc] Context란 무엇인가? 1. Context의 의미 사전적 의미 자체는 맥락이나 문맥을 의미하지만, 개발에서 말하는 Context의 주된 뜻은 이벤트가 일어나는 조건, 환경 등이 된다. 예를 들면, A라는 사람이 인터넷을 통해 물건을 orbit-orbit.tistory.com 1. useContext 란? 사용자가 선택한 언어, 테마, 로그인등의 인증된 사용자 속성을 전달할 경우 유용한 Hook. Context API와 함께 사용하면 앱의 모든 구성요소를 쉽게 전달할 수 있음. (전역상태관리) 1-1. Context API란? 2. useContext 사용하기 1) Hook을 사용할 context 만들기 ex) members.member1을 기본 값으로 가지는 cont..
[etc] Context란 무엇인가? 1. Context의 의미 사전적 의미 자체는 맥락이나 문맥을 의미하지만, 개발에서 말하는 Context의 주된 뜻은 이벤트가 일어나는 조건, 환경 등이 된다. 예를 들면, A라는 사람이 인터넷을 통해 물건을 구매하려고 한다. 쇼핑몰은 A의 이름, 전화번호, 주소 등의 개인 정보와 결제를 위한 정보 등을 필요로 할 것이다. 이 때 A의 정보들이 물건을 구매하기 위해 필요한 Context 개체라고 부를 수 있다. 2. Context의 종류 Context는 중요도에 따라 2가지로 나뉜다. 1) 필수 Context 2) 선택 Context 예를 들면, 온라인을 통해 A가 다른 사람에게 돈을 송금하려고 한다. 은행이 A의 돈을 송금하기 위해선 A의 이름, 계좌번호, 송금할 금액, 다른 사람의 계좌번호 등이 필수..
[React] React Hooks : 3. useEffect 1. useEffect란? 클래스형 컴포넌트의 경우 componentDidMount → componentDidUpdate → componentWillUnMount로 사용되던 것을 함수형 컴포넌트에서는 useEffect를 통해 구현할 수 있다. 2. useEffect 초기 선언 import React, { useEffect } from 'react'; 3. 모든 컴포넌트가 리렌더링 될 때마다 실행하기 메모리가 과다 사용되므로 추천하지 않습니다. useEffect(() => { console.log('모든 컴포넌트가 리렌더링 될 때마다 실행됩니다.'); }); 4. 컴포넌트가 렌더링 된 이후 한 번만 실행하기 렌더링이 완료된 후 호출되며, 빈 배열을 종속시켜 한 번만 실행되도록 한다. 클래스형 컴포넌트의 c..
[React] React Hooks : 2. useState 함수형 컴포넌트를 사용하면 가장 일반적으로 사용하게 될 Hook으로서 상태 변수를 선언하고 업데이트 할 때 사용한다. 1. 초기 세팅 먼저 파일의 가장 상단에 useState Hook을 불러온다. import React, { useState } from 'react'; 2. useState를 사용해 값 생성하기 함수형으로 작성된 컴포넌트 선언 내부에서 useState를 이용하여 string 값 생성 예시 import React, { useState } from 'react'; const ExampleComponent = () => { // useState 예시 const [example, setExample] = useState("초기 값"); return( {/* useState를 사용하여 생성한 ex..
[React] React Hooks : 1. Hooks 란 무엇인가? Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org 1. Hooks란? React의 v16.8.0 [현재 v18.0.0] 등장 이후 사용할 수 있게 된 함수형 컴포넌트가 클래스형 컴포넌트의 state(상태), Lifecycle(수명 주기) 등의 기능들을 사용할 수 있도록 돕는 React의 내장 기능들을 말한다. 2. Hooks를 사용할 수 없는 상황 1) 클래스형 컴포넌트 내에서는 사용할 수 없다. 2) 내부 이벤트 핸들러 3) useMemo, useReducer 등의 같은 Hook 안에서 사용할 수 없다. 4) 일반적인 Javascript 함수 내부 최상위 레벨에서 호출해야 하며, 조건문, 루프, ..

티스토리툴바