본문 바로가기

개발공부/React8

파라미터(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.

티스토리툴바