[React] 8. useReducer

useReducer기존에 컴포넌트 내부에서 상태 관리 코드를 컴포넌트 외부에서도 할 수 있게 해주는 기능 여러개의 상태, 객체, 로직을 한꺼번에 관리하거나 코드를 분리할 때 많이 쓰게 됩니다. 특징 중 하나는 일반적으로 가독성을 위해 switch 문을 많이 씁니다. (if문 써도 무관) import { useReducer } from "react";function counterReducer(state, action) { switch (action.type) { case "INCREMENT": return state + 1; case "DECREMENT": return state - 1; case "RESET": return 0; ..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 7. useEffect

useEffect useEffect의 경우 렌더링이 발생할 때마다 동작하게 할 내용을 적을 때 쓰기 때문에useEffect 를 통해 동작하는 내용이 많아지면 크게 속도가 떨어지니 useState 또는 useRef 로 해결되지 않는 경우에만 사용하여야한다.  또한 렌더링 발생마다 이므로 effect가 존재하는 화면에 처음 들어갈 때도 동작을 한다.import './App.css'import InputText from './components/InputText'function App() { return ( )}export default App import { useEffect,} from "react";import useInput from "../Hook/useInput";con..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 6. 리액트의 생명주기(Life cycle)

일반적인 코딩에서 배우는 전역변수 지역변수의 생명주기가 아닌 React 에서 나오는 생명주기에 대해 작성하고 있습니다 .Life cycle생명주기에는Mount (생성)Update (변경)Unmount (제거)순으로 진행됩니다.MountMount는 화면이 처음 렌더링 되는 그 순간을 의미하는데 자세하게는 이런식으로 동작합니다.코드가 실행되어 렌더링까지의 내용이며,이 과정을 통해 리액트는 화면에 컴포넌트를 출력하고 있습니다.UpdateUpdate는 이름 그대로 변경 사항에 대하여 변경하는 내용으로 위와 같이 동작합니다.즉 리렌더링을 의미하며 이 과정을 통해 리액트는 변경된 내용을 적용하여 출력합니다(중간에 렌더링 할 지 하지 않을지 구분은 Ref , State 생각하시면 됩니다.)Unmount 더 이상 사용..

• format_list_bulleted JavaScript/React
• · 2025. 2. 14.
• textsms

[React] 5. Hook

리액트는 과거 버전에서 UI를 만들 땐 Function 컴포넌트 , 기능을 만들 땐 Class 컴포넌트로 분류하여 작성하였으며  당시에는 State , Ref 라는 기능으로 사용이 되었으나 이제는 Hook 을 통해 Class 컴포넌트로 사용되던 기능들을 낚아채 Function으로 가져간다는 의미로 Hook 이라고 부른다.  Hook 으로 만들어진 것들은 모두 use 가 앞에 붙는 형태로 이루어져 있습니다. (useState , useRef 등등)(단, 이런 Hook 들은 함수 컴포넌트 내부에서만 호출 가능, 조건문(반복문) 내에선 불가능함. ) 또한 기존의 State , Ref가 아닌 내가 필요로 하는 기능을 제작해 만들 수 있는데 이걸 Custom Hook이라 부른다.  예시로 import { useR..

• format_list_bulleted JavaScript/React
• · 2025. 2. 14.
• textsms

[React] 4. useRef

앞의 useState 는 동적인 데이터에 대해 update 가 발생하면 렌더링이 발생하는 반면useRef 의 경우 렌더링 없이 값을 변경한다. 단, 화면에 즉각적으로 보여줘야 할 경우 useState ,값이 변경 되는건 맞지만 화면에 반영하지 않는 내용일 경우 useRef 를 쓴다고 생각하면된다. 예를 들어서 화면에는 보이지 않는 키 값이나 boolean 같은걸 저장하는 변수로 쓰기 좋다 .  count 코드를 재사용해서 보게 된다면  import { useRef, useState } from 'react'import './App.css'import Input from './components/Input'function App() { const [count, setCount] = useState(1);..

• format_list_bulleted JavaScript/React
• · 2025. 2. 13.
• textsms

[React] 3. 상태 (State) [Props와 이어집니다.]

리액트는 대부분 use 로 시작하는데 그 중에서 useState 는 상태를 의미하며 컴포넌트에서 "동적"인 데이터를 관리하는 기능입니다.  즉 컴포넌트의 상태가 바뀌면 리렌더링이 발생합니다 (새로고침)그렇기 때문에 남발하게 되면 안됩니다..  선언 자체도 스프링에서 데이터 업데이트하는 것과 비슷합니다.const [???, set???] = useState(); 이런 구조로 많이 되어 있습니다.  앞에서 말한 예시에서 setState 를 사용하지 않고 오로지 props 를 사용하게 되면 변경이 안 되기 때문에 들고 있는 값을 그대로 가져옵니다 ( 버튼 같은 경우 계속 초기값을 가짐 )하지만 state는 입력 받은 값 을 const[count, setcount] = useState();  기준으로 count..

• format_list_bulleted JavaScript/React
• · 2025. 2. 12.
• textsms