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. 10. 전역(global) 데이터 공유 목차 context란? context객체 생성 클래스 컴포넌트에서의 Context 구독 함수 컴포넌트에서의 Context 구독 1. Context란? React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법 즉, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 여러 컴포넌트에서 값 공유 가능 Context가 쓰이는 상황 예시: 로그인한 유저 확인, 선호하는 언어 선택, 테마 선택 등 2. Context 객체 생성; React.createContext()메서드 Context 객체를 참조하고 있는 컴포넌트를 렌더링할 때 React는 트리의 상위에서 가장 가까이 있는 Provider로부터 현재값을 참조함 defaultValue 매개변수는 트리ㅍ 안에서.. 2022. 4. 29. 8. 조건부 렌더링 목차 논리 연산자 && 사용 삼항연산자 사용 조건식 작성 1. 한가지 조건만을 사용한 표현식 : 논리 연산자 && 사용 조건이 true일 경우 && 뒤의 expression이 출력 조건이 false일 경우 React는 && 뒤에 표현식을 무시하고 건너뜀 조건이 falsy일 경우, && 뒤에 있는 표현식을 건너뛰지만 falsy 표현식이 return 됨 1-1. 문법 condition && expression 2. 두가지 조건을 사용한 표현식 : 삼항연산자 사용 특수문자를 기준으로 끊어서 해석 가능 condition이 true이면(?) true를 return하고 아니면(:) false를 return 2-1. 문법 condition ? true : false 2022. 4. 28. 7. 이벤트 다루기 목차 React 엘리먼트에서의 이벤트 처리방식 JSX 콜백에서의 this bind() 호출없이 binding 방법 합성이벤트 속성 자주 쓰이는 합성 이벤트 1. React 엘리먼트에서의 이벤트 처리 방식 camelCase 사용 JSX 사용하여 함수로 이벤트 핸들러 전달 html의 form 엘리먼트의 retrun 속성이 false라 할지라도 기본 동작 방지 불가능 (= e.preventDefault() 메서드 반드시 호출해야 함) W3C 명세에 따른 합성 이벤트 정의하므로 브라우저 호환성 문제 없으나, 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않음 DOM 엘리먼트 생성 후, 이벤트 리스너를 추가하기 위해 addEventListener() 메서드 호출할 필요 없음 일반적으로, ES6 클래스 사용하여.. 2022. 4. 28. 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. hook1. 기본 목차 hook의 도입 이유 hook이란? lint 규칙이란? hook을 사용하기 위한 환경 생명주기 메서드에 대한 hook의 처리 hook의 한계 1. hook을 도입하게 된 이유? 타언어와는 다른 JS에서의 this 키워드 작동 방식 > class 사용의 어려움 class 컴포넌트의 state 없이도 state 관련 로직 재사용 가능 컴포넌트를 생명주기 메서드 별로 쪼개는 것이 아닌, 연관된 기능에 기반한 더 작은 함수로 쪼갤 수 있음 즉 정리하자면, 함수형 컴포넌트에서 class 컴포넌트의 state 개념과 생명주기 method() 개념에 대응되는 기능들을 사용하기 위해서 hook을 도입하게 됨 2. hook이란? 함수형 컴포넌트에서도 state와 생명주기 개념을 사용할 수 있게 하는 함수 모음(인구.. 2022. 4. 26. 로그인/폼체크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. 이전 1 2 3 4 5 다음