하얀 코딩

컴포넌트는 React Router v6에서 도입된 기능입니다. 이 컴포넌트는 중첩 라우팅 (nested routing)에서 부모 라우트 내에서 자식 라우트 컴포넌트가 어디에 렌더링될지를 지정하는 위치를 나타냅니다. 이를 사용하면, 다른 경로에 대한 서로 다른 하위 컴포넌트를 조건부로 렌더링할 수 있습니다. 컴포넌트가 배치된 곳에서 현재 경로와 일치하는 자식 라우트 컴포넌트가 렌더링됩니다. 사용 예시 import { BrowserRouter as Router, Route, Routes, Outlet } from 'react-router-dom'; function App() { return ( ); } function Layout() { return ( {/* ... 네비게이션 링크 ... */} ); } ..

useParams는 React Router의 훅 중 하나로, 현재 경로의 URL 매개변수를 가져올 수 있게 해줍니다. URL 매개변수는 동적 라우트 경로에서 : (콜론) 문자로 시작하는 부분입니다. 이 훅은 동적 라우트를 사용하는 컴포넌트에서 URL의 변수 부분에 액세스하려 할 때 유용합니다. 1. 동적 경로를 설정합니다. // :userId는 동적 URL 매개변수입니다. 2.useParams()를 사용하여 해당 매개변수에 액세스합니다. import { useParams } from 'react-router-dom'; function User() { // useParams 훅을 사용하여 URL 매개변수에 액세스합니다. // useParams는 현재 경로의 모든 동적 매개변수를 객체 형태로 반환합니다. c..

useNavigate는 React Router v6부터 도입된 훅입니다. 이 훅은 컴포넌트 내에서 프로그래밍 방식으로 라우팅을 제어할 수 있게 해줍니다. React Router v5 이전에서는 useHistory를 사용하여 이러한 동작을 수행했지만, v6에서는 useNavigate가 그 역할을 대신하게 되었습니다. import { useNavigate } from 'react-router-dom'; function MyComponent() { const navigate = useNavigate(); const handleButtonClick = () => { // 다른 경로로 이동 navigate('/about'); }; return ( Go to About ); } useNavigate의 navigat..

SyntheticEvent는 React에서 이벤트 처리를 추상화하기 위한 객체입니다. React 컴포넌트의 이벤트 핸들러 함수에 전달되며, DOM 이벤트와 유사한 인터페이스를 제공하지만, 크로스 브라우징 및 성능 최적화를 위해 React 내부에서 핸들링됩니다. 일반적인 DOM 이벤트와 달리 SyntheticEvent는 브라우저별로 동작하는 이벤트의 차이를 추상화하고, 이벤트 풀링(event pooling) 메커니즘을 통해 메모리 사용량을 최소화합니다. 이는 React 애플리케이션의 성능을 향상시키는 데 도움을 줍니다. React 컴포넌트에서 이벤트 핸들러를 정의할 때, 일반적으로 첫 번째 매개변수로 SyntheticEvent 객체를 받습니다. 이 객체는 해당 이벤트에 대한 정보를 포함하며, 이벤트 타입에..

구문 const 변수 = useRef(초기값) 특징 1. useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다. 2. useRef는 렌더링이 되어도 값을 유지한다. (저장 기능이 용이하다!) 3. useRef는 DOM요소에 접근 하는것도 가능하다. focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 4. 원하는 태그 속성에 ref={} 의 형태로 작성하여 useRef() 주소와 연동이 된다. 5. useRef를 console.log를 찍으면 {current: 현재값}이 나온다. 그리고 이 값을 수정이나 조회 할 때는 current를 쓰면 된다. useRef 활용 1 (DOM) function..

State 컴포넌트 내부에서 변할 수 있는 값 사용법 예시 useState 를 이용하기 위해서는 React로부터 useState 를 불러와야 합니다. import 키워드로 useState 를 불러옵시다. import { useState } from "react"; 다음은 useState를 수도 코드로 작성한 것이다. const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); 변수의 이름은 아무 이름으로 지어도 됩니다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않습니다. function CheckboxExample() { // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습..

조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 결과물을 렌더링 하는 것을 의미합니다. 리엑트에서는 삼항연산자나 단축 평가 논리 계산법을 자주 사용합니다. JSX 에서 null, false, undefined를 렌더링하게 된다면 아무것도 나타나지 않게 됩니다. 삼항 연산자 let result = 조건식 ? 참값 : 거짓값; 조건식에 따라 true면 참값을 리턴, false면 거짓값을 리턴 한다. 단축 평가 논리 계산법 false && false // 앞 true && false // 뒤 false && true // 앞 true && true // 뒤 false || false // 뒤 true || false // 앞 false || true // 뒤 true || true // 앞 논리 연산자를 ..

Hook Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. 1. React 16.8 버전 (2019년도) 에 추가된 공식 라이브러리 2. Class형 컴포넌트에서만 쓸 수 있었던 state와 life cycle을 Function형 컴포넌트에서도 사용 가능 3. 현재 공식문서에서는, Class형 컴포넌트보다는 Function형 컴포넌트로 새로운 React 프로젝트를 만들기를 권장 4. 단, 기존의 Class형 컴포넌트들을 Hook을 이용한 Function형 컴포넌트로 refactoring할 이유는 전혀 없음 Why do you need it? hook을 사용해 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더..