반응형 전체 글58 [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. [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 ··· 10 다음 반응형
