반응형 웹26 [React] React Hooks 리액트 훅스는 클래스 컴포넌트에서만 사용할 수 있는 리액트의 특수한 기능들을 함수 컴포넌트에서도 사용할 수 있도록 도와주는 메소드들을 말한다. 옛날에는 클래스로만 컴포넌트를 만들었다. 그때는 함수 컴포넌트는 UI 랜더링만 되고 리액트 훅스의 모든 기능을 사용할수 없었다. 근데 클래스 컴포넌트는 문법이 너무 더러웠다. 그래서 여러 사람들의 필요에 의해서 함수 컴포넌트에서도 클래스 컴포넌트에서만 사용할 수 있었던 기능들을 사용할 수 있도록 리액트 훅스를 개발했다. 사실 지금까지 useState와 useRef는 리액트 훅이었음. 리액트 훅들은 기능 앞에 접두사로 use가 붙는다. 대략적으로 20개 정도의 훅이 존재한다. 리액트 훅들은 몇가지 조건이 있다.1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능2... 2024. 7. 18. [React] useRef로 컴포넌트의 변수 생성하기 useRef는 useReference의 줄임말로 컴포넌트 내부에 새로운 레퍼런스 객체를 생성해준다. 그리고 이렇게 생성한 레퍼런스 객체는 컴포넌트 내부의 변수로써 일반적인 값들을 저장할 수 있다. 이는 useState와 같아보인다. 하지만 값이 변경되면 컴포넌트를 리렌더링하는 useState와 달리 useRef는 어떤 경우에도 리렌더링을 발생시키지 않는다. 따라서 렌더링에 영향을 미치고 싶지 않은 변수를 생성할 때 useRef를 이용하게 된다. 또한 useRef를 이용하면 컴포넌트가 렌더링하는 특정 DOM 요소에 접근할 수 있고 그 요소를 조작할 수 있다. 예를 들어서 어떤 요소에 focus를 주거나, 어떤 요소의 스타일을 변경할 수 있다는 것이다. 먼저 지지난 시간부터 이어서 만들었던 Register... 2024. 7. 18. [React] State로 사용자 입력관리하기2 지난 시간에 완성했던 코드를 살펴보자.import React, { useState } from "react";//간단한 회원가입 폼//1. 이름//2. 생년월일//3. 국적//4. 자기소개const Register = () => { const [name, setName] = useState("너의이름은"); const [birth, setBirth] = useState(""); const [country, setCountry] = useState(""); const [bio, setBio] = useState(""); const onChangeName = (e) => { setName(e.target.value); }; const onChangeBirth = (e) => { set.. 2024. 7. 18. [React] State로 사용자 입력 관리하기1 이번에는 state로 사용자의 입력을 관리해볼 것이다. 간단한 예시로 회원가입 컴포넌트를 만들어 보았다.//Register.jsimport React, { useState } from "react";//간단한 회원가입 폼//1. 이름//2. 생년월일//3. 국적//4. 자기소개const Register = () => { return ( );};export default Register;먼저 인풋에 들어오는 값으로 사용자의 이름을 설정해보자.//Register.jsimport React, { useState } from "react";//간단한 회원가입 폼//1. 이름//2. 생년월일//3. 국적//4. 자기소개const Register = () => { const [name.. 2024. 7. 18. [React] State를 props로 전달하기 이번에는 State를 컴포넌트의 props로 전달해보는 시간을 가질 것이다.//App.jsimport { useState } from "react";import "./App.css";const Bulb = ({ light }) => { return {light ? 😐 : 😑};};function App() { const [count, setCount] = useState(5); const [light, setLight] = useState(false); return ( setLight(!light)}> 현재 상태: {light ? "ON" : "OFF"} {count} .. 2024. 7. 18. [React] State로 상태관리하기 //App.jsimport { useState } from "react";import "./App.css";function App() { const state = useState(); console.log(state); return ;}export default App;결과를 두개의 요소가 들어있는 배열이 출력된다. 첫번째 값은 undefined로 값이 없고 두번째 요소 함수가 들어있는 것을 볼 수 있다. 첫번째 요소는 새롭게 생성된 state의 값이다. 만약 우리가 새로운 state를 생성하고 초기값을 숫자 5라고 설정한 뒤 콘솔로그를 통해서 확인해보면 이제는 첫번째 요소는 5가 나오는 것을 볼 수 있다. //App.jsimport { useState } from "react";import "./.. 2024. 7. 18. 이전 1 2 3 4 5 다음 반응형
