김평범's OrdinaryCode

🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전부터 Hook을 지원한다고 한다. React에서는 함수형 컴포넌트와 Class형 컴포넌트 두 가지 형태로 코드를 작성하는데, 기존의 함수형 컴포넌트에서는 React State의 생명주기 기능을 이용할 수 없었다. 하지만 hooks 기능이 추가되면서 이제는 함수형 컴포넌트에서도 생명주기 기능을 연동할 수 있게 된다. Hooks은 클래스형 컴포넌트에서는 동작하지 않는다. hooks 업데이트 이후에도 클래스형 컴포넌트는 그대로 사용이 가능 때문에, Hooks의 기능을 위해서 기존 코..

react Ref 이용하기 react에서 직접 DOM에 접근해서 작동시켜야하는 때가 있다. 오늘 가져온 경우는 input에 focus를 줘보는 예시를 만들어보았다. react의 ref를 사용하면 컴포넌트 내부에 있는 DOM에 직접 접근을 할 수 있다. 예시 코드 가장 기본적인 App 컴포넌트를 하나 만들어주었다. 이름을 입력받을 input과 버튼을 클릭하면 input 내용을 초기화한 뒤 포커스를 해주는 버튼을 만들어 보도록 하겠다. import {Component} from "react"; class App extends Component { constructor(props) { super(props); this.state = { name:'이름' } } inputFocus = () =>{ this.se..