본문 바로가기

개발공부/React9

useEffect useEffect리액트에서 컴포넌트가 렌더링된 이후에 특정 작업을 실행하고 싶을 때 사용하는 훅(Hook)대표적으로 API 호출, 타이머 설정, 이벤트 리스너 등록, 콘솔 출력 등과 같은 "부수 효과(side effect)"를 처리할 때 쓰인다. useEffect(() => { // 실행하고 싶은 코드}, [의존성]); 첫 번째 인자: 실행할 함수두 번째 인자: 의존성 배열 (dependency array)→ 배열 안에 있는 값이 바뀔 때마다 이 코드가 다시 실행된다. 두 번째 인자가 빈배열일 경우, 컴포넌트가 처음 나타날 때 한 번만 실행된다. ( API 호출 / 초기데이터 불러오기 )상황useEffect 쓰는 이유데이터 요청렌더링 후 fetch/axios로 API 호출이벤트 등록브라우저 이벤트 추가.. 2025. 4. 14.
파라미터(Parameter) 공부를 하다 보면 useParams()나 파라미터(Parameter)라는 말을 자주 보게 된다.솔직히 일상생활하면서 자주 쓰는 말이 아니기 때문에 나는 아직도 익숙치가 않다.그래서 익숙해지고자 블로그에 정리하기로 했다.파라미터(Parameter)파라미터(Parameter)는 어떤 것을 구분하거나 전달할 때 쓰는 정보 조각이다.특히 웹 주소(URL) 안에 들어있는 정보를 말할 때 많이 사용된다.https://zing829.tistory.com/56 나의 티스토리 블로그 주소에서도 볼 수가 있는데 이 주소에서 맨 끝에 있는 56이 바로 파라미터다.56은 블로그 글 번호, 즉 해당 글을 구분하는 정보를 나타낸다.https://zing829.tistory.com/:postId 파라미터의 종류( 한 URL에 두 .. 2025. 4. 5.
[리액트] react-router-dom react-router라우팅 기능의 핵심 라이브러리로, 다양한 환경(브라우저, 네이티브, 서버 등)에서 사용할 수 있는 공통적인 라우팅 로직을 제공라우팅을 위한 기본적인 기능을 포함하지만, 브라우저 환경에 특화된 기능은 포함하지 않는다.( 브라우저에서 사용하기 위해서는 react-router-dom설치가 반드시 필요하다)react-router-domreact-router-dom은 브라우저 환경에서 사용할 수 있도록 react-router를 확장한 라이브러리브라우저에서 라우팅을 구현하기 위한 DOM 관련 기능들을 제공한다..설치 방법npm install react-router-domreact-router-dom을 사용하여 라우팅 설정하기BrowserRouter, Route, Routes 등과 같은 컴포넌트.. 2025. 3. 19.
[리액트] useState [리액트] Statestate란?state(상태) 는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하는 객체다.컴포넌트의 state가 변경되면 해당 컴포넌트가 자동으로 리렌더링된다. 💡 리렌더링( rerendering ) state나 props가zing829.tistory.com useState는 상태를 관리하는 훅이며, state는 useState를 통해 관리되는 실제 데이터다. useState리액트에서 상태(state)를 관리하는 데 사용하는 훅(Hook)으로, 함수형 컴포넌트에서 상태를 추가할 수 있게 해준다. 초기 상태 값을 인자로 받으며, 배열을 반환한다.배열의 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수다.const [state, setState] = useS.. 2025. 3. 10.
[리액트] State state란?state(상태) 는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하는 객체다.컴포넌트의 state가 변경되면 해당 컴포넌트가 자동으로 리렌더링된다. 💡 리렌더링( rerendering ) state나 props가 변경될 때, 리액트가 컴포넌트를 다시 그림  리액트에서는 useState() 훅을 사용하여 state를 생성하고 업데이트할 수 있다.💡props와 state의 차이props : 부모 → 자식으로 전달되는 변경 불가능한(Read-only) 데이터 state : 컴포넌트 내부에서 관리하는 변경 가능한 데이터 state의 특징 state가 변경되면 리렌더링이 발생한다.state를 변경하면 React가 자동으로 해당 컴포넌트를 리렌더링하여 UI를 업데이트한다. 💡 리렌더링( rere.. 2025. 3. 10.
[리액트] props propsReact에서 props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방식이다.(단반향)컴포넌트 간의 데이터 흐름을 단방향으로 유지할 수 있으며, props는 컴포넌트의 재사용성을 높이는 중요한 역할을 한다.컴포넌트와 propsReact에서 컴포넌트는 JSX를 반환하는 함수이다. [리액트] Component컴포넌트(Component)리액트에서 컴포넌트(Component)는 UI를 구성하는 기본 단위로, 재사용이 가능한 코드 덩어리다.예를 들어, 버튼, 네비게이션 바, 카드 UI 같은 것들이 각각 하나의 컴포넌트가 될zing829.tistory.com 컴포넌트는 ( )괄호 안에 argument(인자)를 받는데 여기서 인자 이름은 props라고 부른다. props는 컴포넌트가 전달받는 유일.. 2025. 3. 7.
[리액트] Component 컴포넌트(Component)리액트에서 컴포넌트(Component)는 UI를 구성하는 기본 단위로, 재사용이 가능한 코드 덩어리다.예를 들어, 버튼, 네비게이션 바, 카드 UI 같은 것들이 각각 하나의 컴포넌트가 될 수 있다. 리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트가 있는데,React 16.8 이후로는 함수형 컴포넌트가 주로 사용되며, 클래스형 컴포넌트는 거의 사용되지 않는다.즉, 리액트의 컴포넌트는 결국 "JSX를 반환하는 함수"라고 볼 수 있다.  컴포넌트의 특징(1) JSX를 반환하는 함수컴포넌트는 JavaScript 함수처럼 작동하며, JSX를 반환하는 함수다.즉, 컴포넌트를 실행하면 HTML처럼 보이는 JSX 코드가 반환되며, React가 이를 해석해 화면에 렌더링한다. JSX 사용 규칙.. 2025. 3. 7.
[리액트]JSX 사용 규칙 ! JSX (JavaScript XML) 란? JavaScript의 확장 문법이면서 React에서 UI를 정의할 때 사용하는 문법으로, JavaScript 코드 안에서 HTML과 유사한 형식으로 요소를 작성할 수 있게 해준다. JSX의 기본 규칙더보기더보기📌JSX 요소는 하나의 부모 요소로 감싸야 한다. 📌 JavaScript 표현식 { } 안에 넣어야 한다. 📌 JSX 내부에서는 if문을 사용할 수 없으며, 삼항 연산자를 사용해야 한다. 📌 undefined를 렌더링하지 않도록 주의해야 한다. 📌 style 속성은 객체 형태로 전달해야 하며, CSS 속성은 camelCase로 작성해야 한다. 📌 HTML의 class 속성 대신 className을 사용해야 한다.1. 감싸인 요소JSX에서 여러 개.. 2025. 3. 5.
처음 배우는 React : 설치부터 JSX까지 간단 정리 리액트(JS)란?UI를 더 인터랙티브하게 만들기 위한 JavaScript 라이브러리컴포넌트 기반 개발을 가능하게 해줌가상 DOM(Virtual DOM)을 사용하여 성능을 최적화단방향 데이터 흐름(One-way Data Flow)을 가짐📌 리액트와 바닐라 JS의 차이바닐라 JS - HTML작성 후 JS로 조작리액트 JS - JS가 요소를 생성 HTML로 번역                1. JavaScript가 element(요소)를 생성                2.React가 이를 HTML로 변환 및 업데이트                3.React가 업데이트해야 할 부분만 변경하여 성능을 최적화react-dom이란?라이브러리 혹은 패키지이며,모든 리액트 요소를 HTML 문서의 body에 렌더링할 .. 2025. 3. 5.

티스토리툴바