본문 바로가기
반응형

전체 글72

[React] useEffect 사용하기 useEffect는 리액트에서 컴포넌트의 side effect를 제어하는 리액트 훅이다. 컴포넌트의 side effect는 무엇인가? 리액트에서 컴포넌트의 사이드 이펙트란 컴포넌트가 어떤 동작을 했을때 발생하게 되는 파생적인 효과를 말한다. 예를 들어서컴포넌트의 어떤 값이 변경되었을 때 콘솔레 변경된 값을 출력하거나,컴포넌트가 마운트 되었을 때 콘솔에 Mount라고 출력하거나, 컴포넌트가 리렌더링(업데이트) 되었을 때 콘솔에 Update라고 출력하거나,컴포넌트가 언마운트 되었을 때 콘솔에 Ummount라고 출력하는 상황을 말한다. 이렇게 라이프 사이클을 제어하는 것도 컴포넌트의 사이드 이펙트라고 할 수 있다. 이번에 알아볼 useEffect를 이용하면 이러한 사이드 이펙트들을 제어할 수 있다. 내가 만약.. 2024. 7. 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.
[프로그래머스] 스택/큐 6문제 1. 같은 숫자는 싫어나의풀이function solution(arr){ var answer = []; var len = arr.length; answer[0] = arr[0]; for(let i = 1; i 다른 풀이function solution(arr) { return arr.filter((val, idx)=> val != arr[idx + 1]);}학습내용````stack/queue로 분류된 문제다 보니자연스럽게 해당 자료구조를 사용하려는 시도를 했다.다른 풀이에서는 Array.filter를이용하여 val의 다음 값에 index를 이용하여 접근하였고,서로 값이 같지 않으면 val를 취하는 식으로 작성하였다.2. 기능 개발나의 풀이function solution(progresses, spee.. 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.
반응형

티스토리툴바