[한 입 리액트] React에서 사용자 입력 처리하기/ DOM 조작하기 - useRef

 

 

 

동작이 비슷한 state들(author, content)은 다음과 같이 하나의 state로 묶어줄 수 있다.

 

 

 

 

props을 나열하는 스프레드 연산자 ...를 이용하여 리팩토링 !

 

 

 

state를 묶어줬으니 setState도 묶어서 표현하니 위와 같다.

앞에는 데이터인 state의 props을 나열, 뒤에는 각 prop의 종류(이름)에 따른 값을 받아 변경시켜주는 함수

 

 

 

 

 

App.css 파일에 작성해 스타일 만듬

 

 

 

 

 

DOM 요소에 접근해야 할 때, useRef를 이용한다.

다음의 코드는 DOM 요소를 선택하는, useRef()라는 기능으로 만든 레퍼런스 객체 authorInput는 현재 가리키는 값(.current)을 포커스(.focus) 기능을 사용하여 포커스하게 한 것이다.