[React] Hooks - useEffect

useEffect란 무엇인가?React의 useEffect Hook은 컴포넌트가 렌더링된 이후에 실행해야 하는 부수 효과(side effects)를 처리하는 데 매우 중요한 역할을 한다. useEffect는 주로 데이터 페칭, DOM 조작, 구독 및 타이머 설정 등과 같은 비동기 작업이나 기타 비정규적인 작업을 관리하기 위해 사용된다.클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드들을 함수형 컴포넌트에서 대체하기 위한 용도로 도입되었다.useEffect 사용방법useEffect는 렌더링 이후에 비동기적으로 실행되며 두 가지 개념을 포함한다.렌더링 후 실행: useEffect는 DOM이 화면에 완전히 렌더링된 ..

• format_list_bulleted Frontend/React
• · 2024. 9. 29.
• textsms

[프로그래머스 / JS] 짝수는 싫어요 - LV.0

문제 설명정수 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..

• format_list_bulleted 알고리즘 풀이
• · 2024. 9. 22.
• textsms

[react] Hooks - useState

React는 UI를 선언적으로 관리할 수 있는 컴포넌트 기반 라이브러리이다. 그 중에서도 상태(State)는 동적인 데이터를 관리하는 데 중요한 역할을 한다. 이때 상태를 쉽게 관리할 수 있도록 도와주는 것이 useState 훅이다. useState란 무엇인가?useState는 함수형 컴포넌트에서 상태를 관리하기 위한 React hook이다. React 16.8 버전에서 등장한 이 훅은 기존의 클래스형 컴포넌트에서 상태를 관리하던 방식에서 벗어나 함수형 컴포넌트에서도 쉽게 상태를 선언하고 변경할 수 있게 한다.const [state, setState] = useState(initialState);/* state: 현재 상태의 값을 저장하는 변수setState: 상태를 변경하는 함수initialState:..

• format_list_bulleted Frontend/React
• · 2024. 9. 21.
• textsms

[React] React Hooks란?

React Hooks란?React Hooks는 리액트 16.8 버전에서 도입된 기능으로 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle)를 관리할 수 있도록 해준다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하며 복잡한 상태 로직을 보다 간결하고 직관적으로 다룰 수 있게 해준다.함수형 컴포넌트 함수형 컴포넌트는 간단한 형태의 컴포넌트로, 클래스형 컴포넌트보다 작성하기 간편하다. 훅스를 사용하면 함수형 컴포넌트에서 상태와 생명주기를 관리할 수 있다.Hooks 사용 훅스는 use로 시작하는 함수들로 리액트에서 제공하는 내장 훅스와 사용자 정의 훅스가 있다. 내장 훅스는 리액트에서 제공하며 사용자 정의 훅스는 개발자가 필요에 따라 만들 수 있다.Hook 규칙..

• format_list_bulleted 카테고리 없음
• · 2024. 9. 18.
• textsms

시멘틱 버저닝 - package.json

시멘틱 버저닝이란? 시멘틱 버저닝(Semantic Versioning, SemVer)은 소프트웨어 버전을 체계적으로 관리하기 위한 규칙이다. 프로젝트의 업데이트 상태와 변경 사항을 명확하게 표현하여 사용자와 개발자에게 일관된 정보를 제공한다. 시멘틱 버저닝은 주로 X.Y.Z 형태로 표현되며 각 숫자는 다음과 같은 의미를 가진다. MAJOR.MINOR.PATCH 형식으로 버전을 구성되어 각 숫자의 의미가 정해져 있어 개발자가 의도한 변경 사항을 명확하게 전달할 수 있다. 아래 package.json 파일은 시멘틱 버저닝을 이해하기 좋은 예시이다.// Pakage.json 파일 일부"devDependencies": { "@eslint/js": "^9.9.0", "@types/react": "^18..

• format_list_bulleted .ect
• · 2024. 9. 13.
• textsms

[React] 리액트의 렌더링 구조

리액트 렌더링?React는 UI를 업데이트하고 유지하는 효율적인 방식을 제공하는 라이브러리이다. 렌더링은 React에서 컴포넌트의 상태(state) 또는 props가 변경될 때 UI를 업데이트하는 과정이다. React의 렌더링은 클래스형 컴포넌트와 함수형 컴포넌트에서 다르게 동작하여 각각 동작 원리를 알아보아야 한다. 최근에는 함수형 컴포넌트를 지향하고 있으며 공식 문서에서도 함수형 컴포넌트 방식을 권장한다. 렌더링 프로세스렌더링 촉발(Triggering a Render)컴포넌트 렌더링(Rendering the Component)DOM에 커밋(Committing to the DOM)리액트 공식 문서에서는 아래와 같은 비유로 설명하고 있다.렌더링 촉발: 손님의 주문을 주방으로 전달하는 단계입니다.컴포넌트 ..

• format_list_bulleted Frontend/React
• · 2024. 9. 13.
• textsms