본문 바로가기

FrontEnd

 (96)
input 태그 속성정리 input태그는 그 안에 값을 입력할 수 있는 방법이 여러가지 존재한다. 그것을 정리해보고자 한다. 위와 같이 type="text"로 하여 입력을 받을 수도 있고 onChange와 value속성을 이용해서 입력을 받을 수도 있다. 또 아래와 같이 필요하다면 type, onChange, value속성을 모두 사용하여서도 값을 입력받을 수도 있다.
React Hooks - useContext + Context API 참고: https://www.youtube.com/watch?v=LwvXVEHS638&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=5 https://react.dev/reference/react/useContext 이문서를 봐라. 모든게 여기서 부터 시작하고 여기서 부터 끝난다. 이거 해석하면 매번 두려움에 떨지 않아도 된다. 1️⃣ contextAPI와 useContext 사용이유 🤬 전역적인 정보들을 props로 전달하려면 단계별로 일일이 다 써주고, 수정시에도 불편하다. 🤬 전역적인 정보: User, 테마, 언어 ✅ 이럴때 사용하는 contextAPI, useContext ✅ 리액트에서는 이러한 문제점을 해결하기 위해서 contextAPI를 제공한다. conte..
React Hooks -useEffect와 useRef를 이용한 간단한 프로그램만들기 Q. 창에 들어가면 input창에 기본으로 focus를 주고 시작한다. Login버튼을 누르면 input창에 입력한 username에 대한 방문인삿말이 alert창으로 나온다(반갑습니다 ***님). alert창을 닫으면 input창은 비워져 있고 focus를 받은 상태로 존재한다. 정답을 보기 전에 input태그에 대해 좀 알아보기로 한다. 원래 코드는 위와 같이 단순히 type을 text로 주었다. 하지만 type을 빼고 name속성을 주면 또 안된다. 그래서 이전에는 어떻게 짲나? 찾아보았더니 아래와 같은 코드가 있었다. type을 빼고 onChange와 value를 준 형태다. 아직까지 둘의 차이점은 잘 모르겠으나 두개 모두 정상적인 결과를 가져온다.
React Hooks -useEffect에 대하여 참고: https://hihiha2.tistory.com/169 훅스의 useEffect와 리엑트의 컴포넌트 라이프사이클은 밀접하게 관계된다. 위 글이 그 관계성을 어느정도 밝히는데 도움을 준다. useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다 useEffect Mount (화면에 첫 렌더링) Update (다시 렌더링) Unmount (화면에서 사라질때)..
React Hooks -useRef에 대하여(3) ref객체와 일반변수와의 다른점. ref를 사용하기 좋은 경우 ref와 variable의 차이점을 보여주는 예. render시 ref의 current값은 초기화되지 않지만 render시 함수형 컴포넌트 전체가 다시 실행되는 것이므로 변수(variable)는 초기값으로 초기화되는 것을 아래 예의 결과에서 확인할 수 있다. import React,{useRef, useState} from "react"; const App=()=>{ const[render, setRender]=useState(0); const ref=useRef(0); let variable=0; const doRender=()=>{ setRender(render+1); } const upRef=()=>{ ref.current=ref.current+1; console.log(ref.current); }..
React Hooks -useRef에 대하여(2) (*****내가 생각했던 모든 깊은 내용이 모두 공식문서에 있다. 반드시 공식문서를 익숙히 해야 한다. 공식문서가 가장 자세하고 친절한 설명서다*****) 반드시 공식 문서봐라. 중간에 이해하기 힘들면 이해하려 노력하고 그래도 안되면 그냥 두고 새 마음으로 다시 읽어나가. 그게 왕도다. 그게 정석이다. https://react.dev/reference/react/useRef#usage 아래 예시 반드시 익힐것. 복잡하지만 차근차근 짚어가면서 해석해야한다. state인 inputs는 객체이며 두개의 키인 '이름',과 'nickname'을 갖는다(주석1참고). 주목할 것이 onChange함수 안에 있는 주석3에서 e.target하여 value와 name을 구조분해 하여 취하고 있는데 여기서의 value, name은 input태그의 속성인 value와 name이다. 즉 input태그의 value, name의 값으로 input창에 무언가를 입력하면 그것이 속성va..
React Hooks -useRef에 대하여 참고:https://www.youtube.com/watch?v=VxqZrL4FLz8&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=3 https://hihiha2.tistory.com/19#recentComments (영상 잘 정리해 놓은글) 아... 이제 알겠다. useRef()로 반환되는 객체의 이름을 nameFocus라고 했을때 nameFocus를 ref속성의 값으로 취하는 태그가 nameFocus객체의 current키의 값이 되는 것이다. useRef의 구체적인 주요역할 3가지. DOM요소에 직접접근, 효율적인 component랜더링과 변수 관리 useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 ..
React Hooks -useState에 대하여 출처: https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO useState function heavyWorkd() { // 뭔가 엄청 무거운 작업 } useState(()=>{}) // 또는 useState(heavyWork) useState(heavyWork())이 아닌, 위의 예시처럼 콜백 형식으로 무거운 작업을 넣어주면 맨처음 렌더링 될 때 한번에만 불린다. 즉 초기값을 가져올 때 무거운 함수를 가져온다면 콜백 형식으로 넣어주기. import { useState } from 'react'; const App=()=>{ const [names, setNames]=useState(['']); const [..

티스토리툴바