setState() 2

[React] #10 리액트 : 함수 컴포넌트와 Hook ?

리액트 v16.8 이후에 등장한 Hook, 지난 포스팅에서 전박적인 컴포넌트에 대해 알아보았다면 오늘은 함수형 컴포넌트와 Hook에 대해 알아보자 🤔 클래스 컴포넌트 ? 함수형 컴포넌트 ? 리액트의 컴포넌트는 ① 클래스 컴포넌트와 ② 함수형 컴포넌트 두 가지로 나눌 수 있다. 둘은 작성하는 방식도 다르지만 내부적인 기능에도 차이가 존재한다. 먼저 클래스 컴포넌트부터 알아보자. class로 정의하고 React.Component 슈퍼 클래스를 extends하게 된다. 중요한 것은 *** render() 통해 JSX를 리턴하게 되는 것이다!!! //클래스 컴포넌트 class ClassComp extends React.Component { render() { return ( Class style componen..

JS/React 2021.09.11

[React] #9 리액트 Hooks : useState()의 비동기적 속성

오늘은 강의를 들으면서 새롭게 알게 된 점을 작성하려고 한다! 🤔 useState()를 이용해 입력값을 업데이트하고 message로 valid 한 지 여부를 알려주는 예제를 진행했다. startsWith(0)을 phoneNumber으로 검사하려고 했는데 아래 예제를 진행하다 보니 useState()로 상태를 변경한다고 해서 즉시 업데이트가 되지 않는다는 특성을 확실히 알 수 있었다 ,,,!!!! 그렇기 때문에 0으로 시작하는지 여부와 길이를 확인하기 위해서는 event.target으로부터 받은 value를 이용하여 직접 확인해야 했다! 그리고 html 버튼에는 disabled를 줄 수 있었다 1!! disabled={true} 이면 버튼을 누를 수 없도록 만드는 속성이었다. 마지막으로 input의 val..

JS/React 2021.09.05