리액트의 데이터(state등)는 부모 component에서 자식 component로 내려간다. 만약 형제 component끼리 상태를 공유하고 싶으면?=> 부모 component로 statef를 올린다. (= State Lifting) 예)아래와 같은 app을 만들어보면 두 개의 자식 컴포넌트가 count값을 알아야 하기 때문에 부모 컴포넌트인 App으로 state lifting을 해야한다. App.jsximport { useState } from "react";import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";function App() { const [..
리액트 컴포넌트는 아래 조건이 충족되면 Re-Rendering 된다. 1. 내 state 값이 변경 될 때2. props 값이 변경 될 때3. 부모 컴포넌트가 Re-Rendering 될 때 예) react의 useState hook을 이용하여 component의 상태를 관리 App Component에서1) 버튼 클릭 시 on / off 상태 관리2) 버튼 클릭 시 count 수 증가 상태 관리 import "./App.css";import { useState } from "react";function App() { // 컴보턴트 리렌더링 => 화면 바뀜 const [count, setCount] = useState(0); const [light, setLight] = useState("OFF");..
상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 Props를 이용하면 된다.React에서 데이터(Props)는 상위 컴포넌트에서 아래 컴포넌트로 흐른다. Props를 전달하는 방법은 두 가지1. 객체형태로 전달App.jsximport "./App.css";import Button from "./components/Button";function App() { const buttonProps = { text: "메일", color: "red", }; return ( );}export default App; Button.jsxconst Button = (props) => { console.log(props); // {text: '메일', co..
ComponentJavaScript에서 html을 리턴하는 함수함수의 첫 글자는 대문자로 작성해야 컴포넌트로 인식한다. vite를 통해 생성한 프로젝트를 실행시켰을 때 원리를 간단히 보면 1. index.html파일에서 main.jsx실행 2. main.jsx에서 App Component 렌더링 3. App Component(함수)는 html을 리턴 JSXJSX는 html과 JavaScript를 혼용해서 사용할 수 있도록 JavaScript를 eXtension한 것JSX 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. {number %2 == 0 ? "짝수":"홀수"}2. 숫자, 문자열, 배열 값만 렌더링 된다. (객체는 오류 발생)3. 모든 태그는 닫혀있어야 한다.4. 최상위 ..
Vite(비트)를 이용하면 React의 기본적인 패키지를 갖춘 프로젝트를 쉽게 생성할 수 있다. 1. $: npm create vite@latest 위의 명령어를 실행 후 React 선택 언어 선택 프로젝트의 기본 틀이 만들어졌다. 2. $: npm i package.json에 명시되어 있는 dependencies를 설치하기 위해 install 명령어를 입력해준다. npm i를 통해 필요한 lib들이 패키지 내에 설치가 됨 3. npm run dev를 입력하 여 React App 실행아래와 같이 로컬에서 React App이 실행된다.
