본문 바로가기
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.
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.
React 환경셋팅1. Create-react-app 1. 실행 커맨드 $ npx create-react-app 디렉토리명 1-1. 실행되지 않은 경우 아래의 화면은 프로젝트 디렉토리를 작성하지 않을 경우 뜨는 문구이다. 아래의 화면이 확인된다면 커맨드에서 디렉토리명을 작성한 뒤 다시 커맨드를 입력하자 1-2. 정상적으로 실행되는 경우 아래의 화면이 나타나게 된다. 2. React 서버 돌리기 2-1. 1번에서 작성한 디렉토리로 이동 후 커맨드 입력 $ cd 디렉토리명 $ npm run start 2-2.dev 서버 열기 dev 서버를 시작한다는 문구가 확인되며 브라우저를 띄우겠다는 팝업이 뜬다 ok를 누르면 아래와 같은 화면이 완료되며 셋팅이 끝난다 3. 셋팅 webpack, babel, react, react-dom, eslint 설치되어 있음 함수 컴.. 2022. 4. 25.
댓글4. 기능구현(U) 1. span에 줄 onClick 이벤트 함수 선언 1-1. 현재 타겟이 되는 span의 내용 가져오기 handleClick = e => { console.log(e.target.innerHTML) } 1-2. items의 li 수정해서 span에 onClick 이벤트 주기 렌더될 때는 content의 내용이 나타나고, span 클릭 시 handleClick 이벤트 실행 items = () => this.props.list.map((v, k) => { return ( {v.userid} {v.content} {v.date} ) }) 2. 상태를 저장할 state 선언 2-1. 클릭 시 content를 저장하기 위해 CommentList 컴포넌트에 state값 주기 상태의 update 속성은 클릭 시, i.. 2022. 4. 25.
댓글3. 기능 구현(C) -수정중 상위가 아닌 현재 컴포넌트(CommentForm) 컴포넌트에 state 선언해서 인풋에 넣은 내용만 최신화 및 submit 눌렀을 때 인풋에 어떤 내용 있는 지 정확하게 확인 가능 1. 인풋박스 상태 최신화 class CommentForm extends React.Component { state = { value: '' } render() { return( ) } } 함수를 만들어서 밸류 값을 반영해보자 handleChange = e => { const {value} = {...e.target} this.setState({ value }) } 폼 컴포넌트의 인풋에 이벤트 작성 onChange={this.handleChange} 2. 폼을 제출할 때 이벤트를 발생시키기 위해 함수 선언 후 이벤트 작성 ha.. 2022. 4. 25.
댓글2. 기능 구현 (R) 목차 App컴포넌트로 state 끌어올리기 state의 list, CommnetList 컴포넌트에 props로 전달 리스트 렌더하기 componentDidMount() 메서드로 CSR 누적 작성 코드 list에서 state를 선언하면 데이터를 뿌리는 것은 쉽다. 하지만 컨텐츠의 내용은 사용자가 Form의 인풋 내용을 서브밋 하는 내용이 들어가야 한다. 따라서 Form의 내용을 List로 받아야 함 props는 부모 컴포넌트에서 자식으로 전달할 수 있음 따라서 상태 끌어올리기 스킬을 통해서 상태를 Comment로 끌어올려서 Comment에서 자식인 Form과 List로 전달해야 함 하지만 현재 코드에서는 Comment 컴포넌트에 props.children을 입력했으므로 앱 컴포넌트에 state를 입력할 것.. 2022. 4. 25.

티스토리툴바