전체 글27 8. 리액트 컴포넌트의 라이프사이클 ● 컴포넌트가 탄생하는 순간● 화면에 처음 렌더링 되는 순간 ● 컴포넌트가 다시 렌더링 되는 순간● 리렌더링 될 때를 의미 ● 컴포넌트가 화면에서 사라지는 순간● 렌더링에서 제외 되는 순간을 의미 [ 라이프사이클 제어 ] [ 사이드이펙트(SideEffect) ]● 컴포넌트 동작에 따라 파생되는 여러 효과 import './App.css';import Viewer from './components/Viewer';import Controller from './components/Controller';import { useState, useEffect } from 'react';function App() { const [count, setCount] = useState(0); const [inpu.. 2024. 6. 4. 7. 실습 : 카운터 앱 만들기 데이터를 전달할 때 props를 이용한다. props는 부모 -> 자식으로 전달한다.Viewer와 Controller는 부모-자식 관계가 아닌 형제관계이기 때문에 서로 데이터를 전달할 수 없다.따라서, state가 존재해야 하는 곳은 두 컴포넌트의 부모인 App 컴포넌트에 존재해야 한다. App.cssbody{ padding: 20px;}.App { margin: 0 auto; width: 400px;}.App > section { background-color: rgb(245, 245,245); border: 1px solid rgb(240,240,240); border-radius: 5px; padding: 20px; margin-bottom: 10.. 2024. 6. 1. 6. React Hooks [ React Hooks ] 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드들 ● useState : State 기능을 낚아채오는 Hook● useRef : Reference 기능을 낚아채오는 Hook등등의 다양한 훅이 존재함 ● 함수 컴포넌트 내부에서만 호출 가능● 조건문, 반복문 내부에서는 호출 불가 ( 서로다른 훅들의 호출 순서가 엉망이 되는 경우도 발생 )● 나만의 Hook도 제작 가능 (Custom Hook) import { useState } from "react";// 3가지 hook 관련 팁// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능// 2. 조건부로 호출될 수는 없다// 3. 나만의 훅(Custom Hook) 직접 만들 수 있다const H.. 2024. 6. 1. 5. React.js의 useRef ● Reference 객체를 생성 ● 컴포넌트 내부의 변수로 활용 가능 ● 어떤 경우에도 리렌더링을 유발하지 않음 1. useRef() 를 이용해서 생성할 수 있음2. 괄호 안에 들어가는 값은 useRef 의 current 값으로 저장됨 import { useState, useRef } from "react";//간단한 회원가입 폼const Register = () => { const[input, setInput] = useState({ name : "", birth: "", country: "", bio: "", }); const countRef = useRef(0); const inputRef = useRef(); // 통.. 2024. 5. 31. 4. React.js 의 State와 Props [ State로 상태 관리하기]하나의 컴포넌트에 여러 개의 state를 만들 수 있음리렌더링 (Re-Rendering) : 컴포넌트의 state 값이 바뀌면 그 컴포넌트가 return 을 다시 해서 화면을 다시 그림이 때, 변경된 state 값도 함께 반영 1. 새로운 state를 생성하는 useState라는 함수는 인수로 초깃값을 받아서 두 개의 요소를 담은 배열을 반환하는데 첫 번째 요소는 state의 현재 값이고 두 번째 요소는 state를 변경시키는 상태변화함수이다. 2. useState() 생성 시 괄호 안에 값을 넣어 state 값을 생성할 수 있다. 그런데 그냥 변수 하나 만들어서 관리하면 그게 state랑 똑같은 거 아님?=> 그렇게 하면 버튼이 클릭될때마다 변수의 값이 바뀔 순 있음 .. 2024. 5. 31. 3. React.js 입문 vite >● 차세대 프론트엔드 개발 툴 ● 기본 설정이 적용된 React App 생성 가능● React 공식 문서에서도 권장[React App 구동] [ JSX로 UI 표현하기 ]◆ JSX 주의사항1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.2. 숫자, 문자열, 배열 값만 렌더링 된다.3. 모든 태그는 닫혀 있어야 한다.4. 최상위 태그는 반드시 하나여야 한다 [ Props로 데이터 전달하기]1. Button 컴포넌트에 Spread 방식으로 데이터 전달할 수 있음2. Button 컴포넌트 내에서 color 변수가 안들어왓는데 toUpperCase()를 호출하면 에러가 날 수 있기 때문에 defaultProps로 디폴트 값을 설정할 수 있음 [ 이벤트 처리하기]Event Handling -.. 2024. 5. 30. 이전 1 2 3 4 5 다음
