리액트를 쓸 수 있게 해주는 루트를 만드는 API들! Next.js 같은 프레임워크를 쓴다면 별로 쓸 일이 없을 것 같긴 한...🫠 📄 Docs 🔗 createRoot 🔗 hydrateRoot createRoot 브라우저의 DOM 노드 안에 React 컴포넌트를 표시하는 루트를 생성하는 API 1. Reference import { createRoot } from 'react-dom/client'; const domNode = document.getElementById('root'); const root = createRoot(domNode); 루트를 생성한 후, 그 안에 React 컴포넌트를 표시하기 위해 root.render(;)를 호출해야 한다. 온전히 React만으로 구축된 앱은 보통 루트 컴포넌..

모달 짱 쉽게 만들 수 있을 것만 같은 API..🩵 📄 Docs 🔗 createPortal createPortal cratePortal을 사용하면 컴포넌트의 일부를 DOM의 다른 부분에 렌더링할 수 있다. 포털을 생성하려면 createPortal을 호출하고 JSX와 렌더링할 DOM 노드를 전달한다. {createPortal(children, domNode, key?)} 포털은 DOM 노드의 물리적 배치만 변경한다. 포털에 렌더링하는 JSX도 이를 렌더링하는 React 컴포넌트의 자식 노드 역할을 한다. 예를 들어, 자식은 부모 트리에서 제공하는 컨텍스트에 접근할 수 있고, 이벤트는 React 트리에 따라 자식에서 부모로 버블링된다. Parameters children React로 렌더링할 수 있는 모든 ..

form 액션의 결과에 기반하여 상태를 업데이트할 수 있게 해주는 Hook 마지막 양식 제출의 status 정보를 제공하는 Hook 📄 Docs 🔗 useFormState 🔗 useFormStatus useFormState 💡 현재는 Canary와 experimental channel에서만 사용할 수 있다. 💡 useFormState을 사용하는 이점을 얻으려면, React 서버 컴포넌트를 지원하는 프레임워크에서 사용해야 한다. form 액션의 결과에 기반하여 상태를 업데이트할 수 있게 해주는 Hook이다. const [state, formAction] = useFormState(fn, initialState, permalink?); 1. Reference useFormState(action, initia..

hook을 작성할 때는 반드시 컴포넌트의 최상위 레벨 혹은 커스텀 훅 안에서만 작성할 수 있다. 즉, 조건문, 반복문, 함수 내부에서는 hook을 호출할 수 없다. 왜 이런 규칙이 생겼는지 알아보자!! 🔗 참고한 글 React hooks: not magic, just arrays Untangling the rules around the proposal using diagrams medium.com State: 컴포넌트의 메모리 – React The library for web and native user interfaces react-ko.dev useState를 호출하는 코드를 보면, 인자로 초기값만을 전달하고 있다. const [index, setIndex] = useState(0); 어떤 state..

리렌더링을 일으키지 않고 정보를 "기억하는" 방법을 알아보자. 컴포넌트가 특정 정보를 기억하도록 하고 싶지만 그 정보가 새로운 렌더링을 촉발하지 않게 하려면 ref를 사용하면 된다! 📄 Docs 🔗 useRef 🔗 Referencing Values with Refs 🔗 Manipulating the DOM with Refs 0. useRef useRef(initialValue) 컴포넌트의 최상위 레벨에서 useRef를 호출해서 ref를 선언한다. import { useRef } from 'react'; const ref = useRef(0); useRef가 반환하는 객체 { current: 0 // The value you passed to useRef } ref.current 속성을 통해 ref의 현재..

1. Redux 📄 Redux 📄 React Redux 1-1. Installation npm install redux npm install react-redux1-2. Setting 1) Redux Store를 이용 가능하게 해주는 컴포넌트인 로 index.js의 을 감싼다. 는 react-redux에서 가져온다. store는 별도의 파일에서 만들어서 가져온다. import { BrowserRouter } from "react-router-dom"; import { Provider } from "react-redux"; ~~~ 생략 ~~~ root.render( ); ~~~ 생략 ~~~2) reducer 생성 store를 만들기 위해서는 reducer가 필요하므로, reducer를 먼저 만들어주자! s..

1. Installation npm install react-router-dom@6 2. Setting 1) src/index.js 로 App을 감싼다. import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 2) src/App.js 안에서 필요한 페이지들을 태그를 이용해 정의해둔다. path 속성에 담은 값이 각 페이지의 경로가 된다. import "./App.css"; import { Routes, Route } from "react-router-dom"; import Homepage from "./page/Homepag..

1. 기본 형태 클래스 컴포넌트의 기본 형태를 먼저 보자! ES7 React/Redux/React-Native/JS snippets Extension을 사용하고 있다면 rcc를 입력하면 기본 형태를 자동으로 입력할 수 있다. import React, { Component } from 'react' export default class AppClass extends Component { render() { return ( ) } } 2. State 1) state 만들기 클래스 컴포넌트는 hook이 없다! 따라서 function 컴포넌트처럼 useState를 사용할 수 없다. constructor 메서드 안에서 state 객체를 만들어주고 안에 필요한 state들을 요소로 넣어준다. (이 c..

📄 Docs 2023년에 리뉴얼된 리액트 공식 문서의 "Describing the UI" 내용이다. 📚 You will learn React Component import / export JSX props 조건부 렌더링 목록 렌더링 컴포넌트 순수성 유지 1. React Component 1-1. 컴포넌트: UI 구성 요소 리액트는 markup, CSS, JS를 사용자 정의 컴포넌트로 결합할 수 있게 해주며, 이는 앱의 재사용 가능한 UI 요소가 된다. 1-2. 컴포넌트 중첩 컴포넌트는 일반 JS 함수이므로 한 파일에 여러 컴포넌트를 포함할 수 있다. 컴포넌트가 다른 컴포넌트를 렌더링할 수는 있지만, 아래처럼 정의를 중첩해서는 안 된다!! export default function Gallery() { /..

📄 Docs 2023년 3월에 리뉴얼된 리액트 공식 문서의 첫번째 장, "Quick Start"의 내용이다. 📚 You will learn 컴포넌트 생성 및 중첩 마크업과 스타일 추가 데이터 표시 조건부 렌더링과 목록 렌더링 이벤트 응답 및 화면 업데이트 컴포넌트 간 데이터 공유 1. Creating and nesting components 리액트는 컴포넌트로 구성된다. 컴포넌트는 자체 로직과 외관을 가진 UI의 일부이다. 컴포넌트는 버튼만큼 작을 수도 있고, 한 페이지 전체만큼 클 수도 있다. 리액트 컴포넌트는 마크업을 리턴하는 JS 함수이다. 컴포넌트의 이름은 대문자로 시작한다. 1-1) 컴포넌트 생성 function MyButton() { return ( I'm a button ); } 1-..

화면을 전환시켜보자! React-Navigation 앱 내 화면 간 전환을 처리하기 위해 사용하는 라이브러리 화면을 전환시키는 방법의 차이 Next.js & React next/router, react-router 화면을 아예 이동하는 방식 React-Native React-Navigation 라이브러리를 이용한다. React-Navigation에 컨테이너를 만들어 놓고 화면을 가져와서 보여준다. 화면을 이동하는 것이 아닌, 하나씩 쌓여가는 stack 방식으로 화면이 전환된다. React-Navigation 설치 [React-Navigation] 1. Navigation 설치 yarn add @react-navigation/native 2. react-native-screens와 react-native-..