jhlee의 성장로그

이 글은 리액트 공식문서를 보고 학습한 내용입니다. 제어 컴포넌트 HTML에서 , 와 같은 폼 엘리먼트 - React에서 변경할수 있는 state가 일반적으로 컴포넌트 state 속성에 유지. 키가 눌릴 때마다 매번 handleChange가 동작. input값이 항상 React State에 의해 업데이트 됨 실습보기 제어 컴포넌트 - input, textarea, select codepen에서 보기 다중 input codepen에서 보기 React state - "신뢰 가능한 단일 출처(single source of truth)"를 만들어 두 요소를 결합. 제어되는 Input Null값 제어 컴포넌트에서 value prop을 지정하면 사용자가 변경할 수 없다. value를 설정했는데 여전히 수정할 수 있..

아래 내용은 리액트 공식문서를 보고 정리한 내용입니다. 클래스의 메서드로 만들기 - constructor 안에서 바인딩해주기 class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn: true }; // ✅ 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다. this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState((prevState) => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( {" "} {this.sta..

class형 컴포넌트의 생명주기 [실습] 화면에 시간 표시하기 - https://codepen.io/jihyunleeme/pen/bGvZzvb 공식문서를 보고 실습한 내용입니다 - 설명은 주석에 써두었음 state 업데이트는 비동기적 // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); // Correct this.setState((state, props) => ({ // state, props 두번째 인자 // 업데이트가 적용된 시점의 props를 두번째 인자로 받아들임 counter: state.counter + props.increment })); // 일반함수에서도 가능 this.setState(functi..

eslint에 use hook 설정을 하고 난 뒤 다음과 같은 에러가 떴다. useState 뿐만 아니라, useEffect, useMemo 등 모두 import가 잘되어있었는데도 경고가 떴다. 서치 후, 너무나 어처구니 없는 실수임을 깨달았다. 함수형 component의 이름이 대문자가 아닌 소문자로 작성되어 있어서 생긴 문제. 이 파일명이 DeviceAccess가 아닌 ControlAccess여서 ControlAcess로 동일하게 바꿔주었다. 오류가 사라졌다.