React Fragment란?

Fragment = "조각" / "파편" / "단편" 여러 개의 조각(요소)들을 하나로 묶어주지만, 그 자체는 실체가 없는 "투명한 그룹"이라는 의미이다. React에서 return은 하나의 루트 요소만 반환할 수 있다.그렇기에 불필요한 DOM 노드 없이 여러 요소를 그룹화하기 위해서 의 축약 문법인 으로 표현하며 Fragment를 사용한다. // ❌ 에러 - 형제 요소 2개 반환 불가 return ( 제목 내용 ) // Fragment 사용 return ( 제목 내용 ) // 전체 문법 제목 내용 // 축약 문법 (더 많이 사용) 제목 내용 (Fragment)실제 DOM에 가 생성됨D..

• format_list_bulleted React
• · 2026. 1. 1.
• textsms

React - useEffect()

React Hook 중에는 useEffect라는 Hook이 존재한다. useEffect란 리액트에서 기본적으로 제공해주는 함수로써, useEffect함수가 포함된 컴포넌트가 처음 마운트되거나 컴포넌트가 리렌더링 될 때, 또는 선언된 변수의 값이 변경되거나 redux store의 값이 변경될 때 실행할 구문들을 정의해놓은 함수이다.기본적으로 React에서는 state값이 변경되면 해당 컴포넌트가 다시 랜더링된다.function Welcome(props) {const [count, setCount] = useState(0); return ( setCount(count + 1)}>증가 count : {count} );} 이때, onClick에 함수의 참조를 넣는것이 아니라 위와..

• format_list_bulleted React
• · 2023. 10. 29.
• textsms

React - utils.ts:781 Uncaught Error: useHref() may be used only in the context of a <Router> component.

문제 상황 리액트로 페이지 이동을 할 때 보통 Router를 통해서 페이지 네비게이션을 하는데 이때 utils.ts:781 Uncaught Error: useHref() may be used only in the context of a component. 이라는 오류를 만났다. 마침 스택오버플로우에 나와 똑같은 현상을 겪은 사람이 질문을 올려줬고 정확하게 답변해준 사람이 있었다. https://stackoverflow.com/questions/70220413/error-usehref-may-be-used-only-in-the-context-of-a-router-component-it-wor Error: useHref() may be used only in the context of a component...

• format_list_bulleted React
• · 2022. 11. 30.
• textsms

React - State 개념과 useState Hook

State 개념 리액트에서 State는 Component의 데이터 상태를 말한다. 한마디로 State란 개발자가 정의한 변경 가능한 데이터를 말하며 이는 자바스크립트 객체로서 존재한다. KeyPoint는 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다는 점이다. 왜냐하면 State가 변경될 경우 Component가 다시 렌더링 되기 때문에 그 외의 데이터가 State로 작성되면 불필요하게 다시 렌더링되어 성능저하를 초래하기 때문이다. 따라서 렌더링이나 데이터 흐름에 사용되지 않는 값들은 Component안에 instance field로 정의해서 사용한다. useState useState는 React의 내장 Hook 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해준다. 이는 ..

• format_list_bulleted React
• · 2022. 9. 3.
• textsms

React - component 합성과 추출

Component 합성 리액트에서는 Component안에 또 다른 Component를 사용할 수 있다. 따라서 복잡한 화면을 여러개의 Component로 구성할 수 있다. 예시) function Welcome(props) { return Hello, {prop.name} ; } function App(props){ reutrn( ) } ReactDom.render( , document.getElemnetById("root") ); 위 코드를 보면 Welcom 컴포넌트를 prop 를 다르게하여 여러번사용하는 것을 볼 수 있다. App이라는 Compoent는 Welcome이라는 컴포넌트를 포함하고 있는데 이러한 것을 컴포넌트 합성이라고 한다. Component 추출 컴포넌트 합성과 반대로 복잡한 컴포넌트를 ..

• format_list_bulleted React
• · 2022. 9. 3.
• textsms

React - Component 개념 정리

Component란? 리액트의 컴포넌트는 아래의 그림과 크게 클래스 컴포넌트와 함수 컴포넌트로 나누어 볼 수 있다. 리액트 초기버전에는 클래스 컴포넌트를 주로 사용하였으나 사용의 불편함이 대두되어 이후에는 함수 컴포넌트를 개선하여 사용하게 되었다. 함수 컴포넌트를 개선하면서 만들어진 것이 훅(Hook)이다. 훅이란 class를 이용한 코드를 작성할 필요 없이 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리이다. 이 훅을 통해서 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. Function Component(함수형 컴포넌트) 모든 리액트 컴포넌트는 pure function과 같은 역할을 해야한다고 했다. 이는 곧 리액트 컴포넌트를 일종의 함수라고 생각한다는 것이다. 다음의 예시..

• format_list_bulleted React
• · 2022. 9. 2.
• textsms