react

React

[React] component Life Cycle / useEffect를 통한 component Life Cycle 제어

Component Life Cycle리액트 컴포넌트의 라이프사이클은Mount -> Update -> Unmout로 진행된다.Mount : 컴포넌트가 최초에 렌더링 됨Update : 컴포넌트가 리렌더링 됨Unmount : 컴포넌트가 화면에서 제거 됨   useEffect를 통한 component Life Cycle 제어useEffect :   두 번째 인수인 [] 배열의 값이 바뀌면, 첫 번째 매개변수의 함수를 호출예) useEffect(() => { console.log(`count: ${count} / input ${input}`); }, [count, input]); // 의존성 배열, dependency array(deps)  예) 클릭을 홀수 번 할 때 없어지는 컴포넌트 App.jsxim..

React

[React] component 기본 구조 / State Lifting

리액트의 데이터(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 [..

React

[React] useRef로 component 내에 reference객체 생성

useRef vs useStateuseRefuseStateReference 객체를 생성State를 생성컴포넌트 내부의 변수로 활용 가능컴포넌트 내부의 변수로 활용 가능값이 바뀌어도 컵포넌트 리렌더링 발생하지 않음값이 바뀌면 컵포넌트 리렌더링 발생  사용 예)input tag에 DOM 요소를 reference 객체에 저장하여 input값이 빈 경우 focus 호출 import { useState, useRef } from "react";const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "", }); const countRef = useRef(0); ..

React

[React] Comonent 리랜더링 조건 / State로 Component 상태 관리

리액트 컴포넌트는 아래 조건이 충족되면 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");..

React

[React] Props를 통해 Component로 데이터 전달

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 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..

React

[React] Component & JSX

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. 최상위 ..

React

[React] React App 생성하기 (+ Vite)

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이 실행된다.

개발새발
'react' 태그의 글 목록