모든지 기록하자!

Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. 리액트의 컴포넌트는 클래스형과 함수형으로 나눠진다. 아래는 이전 게시물의 클래스 컴포넌트를 사용한 예제와 훅스를 사용한 예제이다. Class component Hooks 먼저 위 코드의 ref에 대해 알아보자 ref란 DOM에 직접 접근하기 위해 사용한다. Html을 작성할 때 와 같이 id를 사용한다. 특정한 id에 해당하는 DOM에만 스타일이나 자바스크립트에서 여러가지 작업을 할 수 있다. 이렇게 id를 붙이는 것 처럼 리액트에서도 DOM을 선택해 직접 접근하기 위해 ref를 사용한다. state 비교 //클래스형 state = { first: Math.ceil(Math.random() * 9), second:..

바뀌는 부분은 아래처럼 state로 등록해준다. state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', result: '', }; // 컨텐츠 render() { return ( {this.state.first} 곱하기 {this.state.second}는? // 올바른 input // 입력 안되는 input창 onChange가 없어 오류발생 // jsx 문법이기 때문에 input 뒤에 /로 닫아주지 않으면 오류가 발생한다. 입력! {this.state.result} ); } onChange함수가 없이 입력안됨 input 창에 value를 위에서 state로 지정했기 때문에 onChange..

JSX(JavaScript XML)은 Javascrpint에 XML을 추가하여 확장 문법이다. JSX은 Javascrpint의 공식적인 문법이 아니다. 브라우저에서 실행하기 전 바벨(리액트 라이브러리)을 사용하여 자바스크립트 형태 코드로 변환된다. // JSX 예시 function App(){ retrun( 테스트 ); } // 위와 같이 작성했을 시, 바벨이 아래와 같이 Javascript로 해석해준다. function App(){ return React.createElement("h1", null, "테스트"); } JSX문법 1. 반드시 부모 요소 하나가 감싸는 형태여야 한다. - Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM ..