# Uncontrolled Component
[React]-Form을 만들어보자!/제어 컴포넌트와 비제어 컴포넌트??
오늘은 form을 만드는 두 가지 방법에 대해 알아보았다. > Controlled Component: 제어 컴포넌트 Uncontrolled Component: 비제어 컴포넌트 사용자가 무언가를 클릭하거나 했을 때 UI가 업데이트 되어야 한다면, React Component 자체 내 상태가 변경되면서 UI가 업데이트 되어야 하는데, 이렇게 만든 form을 보면 input에 입력을 했을 때 React 내부적으로 상태 변경이 이루어지지 않아도 바로 UI상에서 내가 입력한 것이 보인다. 이런 것을 Uncontrolled Component라고 한다. 이런 경우 React가 추구하는 원칙과 어긋나기 때문에 데이터가 보여질 때 이 컴포넌트에서 가지고 있는 상태와 똑같이 매칭이 되도록 만들어주어야 한다! 이 말인즉슨 Controlled Component로 만들어 줘야 한다는 의미! 그렇게 하려면 무엇을 이용한다? 바로 **! 이렇게 작성하면 !
React에서 FormData 사용하기
전에 트위터에서 봤었고 탐토님이랑 리믹스 실습하면서도 봤는데 어제 한 번 다시 html 웹 표준을 얘기하다 리액트에서 form input 값들을 다룰 때 state랑 ref 훅이나 react hook form 라이브러리를 사용하면서 고통받을 필요 없다고 하셔서 마침 게시판을 만드는 김에 배우려고 한다..! Controlled vs Uncontrolled Components > 참고 제어 컴포넌트 vs. 비제어 컴포넌트 [제어 컴포넌트와 비제어 컴포넌트의 차이점](https://velog.io/@yukyung/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F
React 실전 활용!
HOC(High Order Component) > advanced technique in React for reusing component logic > > > not part of the React API > > a pattern that emerges from React’s compositional nature. > HOC = function(컴포넌트) { return 새로운 컴포넌트; } 를 인자로 받아 를 리턴하는 함수 > props ⇒ component ⇒ UI > > component ⇒ HOC ⇒ NEW component > withRouter() 보통 with 가 붙은 함수가 HOC 인 경우가 많다. export default withRouter(LoginButton); > 사용하는 법 > > - Use HOCs For Cross-Cutting Concerns > - D