본문 바로가기
hook이론3. useContext() 목차 useContext() 메서드란? 문법 특징 이전 게시글에서 전역 데이터를 공유하기 위한 contextAPI에 대해 배운 적있다. https://yellow-w.tistory.com/254?category=1037018 오늘은 전역 데이터를 공유하기 위한 hook 메서드 인 useContext()에 대해서 알아보자. 1. useContext() 메서드란? 전역 데이터 공유를 위한 hook 메서드 context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환 context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 의 value prop에 의해 결정 2. 문법 2-1. 매개변수 context 객체 그 자체여야 함 .. 2022. 5. 2.
hook이론1. State Hook 목차 useState()메서드 호출의 의미 문법 초기 렌더링 시의 state 1. useState() 메서드 호출의 의미? state 변수의 선언 클래스 컴포넌트에서의 this.state 기능과 동일 state 변수는 react에 의해 해당 컴포넌트 뿐만이 아닌 전역으로 사용 가능 2. 문법 인자값은 state의 초기값 만약, n개의 다른 변수를 저장하기를 원한다면 useState() 메서드를 n번 호출해야 함 state 변수와 state 변수를 업데이트 할 수 있는 함수를 반환 const [state, setState] = useState(initialState); 최초 렌더링을 하는 동안 반환된 state는 첫번째 전달된 인자인 initialState 값과 동일하다. 이후 setState함수를 호출하.. 2022. 4. 29.
hook이론4. useReducer 목차 useReducer() useReducer 사용하여 state 변경 state 초기화(명시, 지연) 1. useReducer() 메서드란? useState()의 대체 메서드 state의 하위값이 다수 존재하는 등의 복잡한 정적 로직 만드는 경우 또는 새로운 state가 이전의 state에 의존적인 경우 useReducer 사용 상태를 바꾸는 코드를 한 공간에 밀어넣기 위해서 Reducer를 씀 (=즉, useReducer() 메서드는 상태를 만들고 상태를 변경할 수 있는 메서드임) 2. useReducer 사용하여 상태 변경 2-1. 가져오기 import React,{useReducer} from 'react' 2-2 hook 호출 const [state, dispatch] = useReducer(.. 2022. 4. 28.
로그인/폼체크2 - 유효성 검사 목차 validate 함수 선언 validate 함수 호출 유효성 검사 조건식 작성 함수의 return값으로 state 업데이트 동작 확인 누적 작성 코드 유효성 검사는 종종 쓰이기 때문에 따로 함수로 빼보자! 1. validate이란 이름의 함수를 선언 const validate = (input) => { } 2. form 제출 시 실행되도록 하기 위해 handleSubmit 함수에서 호출 Form 컴포넌트의 handleSubmit 함수에서 변수 input 선언 후, 사용자가 input 박스에 입력한 value값을 받아와서 속성으로 담는다. 그 다음 validate 함수를 호출하여 인자값으로 input 객체를 넣는다. const input = { userid: id.value, password: pw... 2022. 4. 26.
로그인/폼체크(1) 목차 입력값 체크할 state 선언 유효성 검사를 위한 조건식 조건식의 결과로 state 업데이트 유효성 검사의 결과 확인 누적 작성코드 인풋 박스의 기능을 최대한 활용해서 로그인 정보의 유효성을 검사해보자! 1. 입력 값 체크할 수 있는 state 선언 errors라는 객체를 선언해서 에러 객체의 내용이 비어 있으면 정상적인 밸류값, 객체의 속성이 들어가 있으면 들어간 속성에 해당하는 input의 value값이 유효하지 않음을 나타낼 것이다. 예시: errors = {} errors = { userid: '아이디가 유효하지 않습니다', password: '패스워드가 유효하지 않습니다.' } Form 컴포넌트에 input박스에 value로 입력된 값을 체크할 수 있는 state를 만들어보자. errors.. 2022. 4. 26.
hook이론2. Effect Hook 목차 side effects란? useEffect() 메서드 effects의 유형 clean-up 개념 effect 발생시기 조건부 effect 1. side effects(혹은 줄여서 effects)란? 다른 컴포넌트에 영향을 줄 수 있지만 렌더링 과정에서는 구현할 수 없는 작업들 ex) React 컴포넌트 안에서 데이터를 가져오거나 업데이트/ 수동으로 컴포넌트의 DOM 직접 조작 2. useEffect()메서드 2-1. useEffect() 메서드란? 이펙트 훅 함수 컴포넌트 내에서 side effects를 수행할 수 있게 해주는 메서드 useEffect에 전달된 함수는 모든 렌더링이 완료된 이후 실행됨(디폴트) 두번째 인자값 작성 시, 어떤 값이 변경되었을 때만 실행할 수 있게도 가능 아래의 3가지.. 2022. 4. 25.
hook실습1. counter 만들기 목차 state 초기화 및 렌더될 화면 디자인 onClick 이벤트 작성 누적 작성 코드 버튼을 클릭하면 값이 증가하는 counter를 작성해보자! 우선 기본 기본 셋팅과 디자인부터 작성해보자. 1. state 초기화 및 렌더될 화면 디자인 1-1. 코드 작성 순서 import 문을 통해 React와 hook을 가져옴 State라는 함수 컴포넌트 생성 retrun으로 렌더될 화면을 디자인하는 코드 작성 useState() 메서드로 hook 호출 1-2. 작성 코드 import React, {useState} from 'react' const State = () => { const [count, setCount] = useState(0) return( You clicked {count} times. Cli.. 2022. 4. 25.

티스토리툴바