반응형 frontend11 [React]TS로 개발할 때 input 값 여러 개 받기 리액트로 사이드 프로젝트를 개발하던 도중 input 값을 여러 개 받아야 되는 경우가 생겼다. 해당 항목마다 state를 만들고 onChage 함수도 따로 만들어 각각 달아주는 방법도 있지만 중복 코드도 많고 쓸 데 없는 작업이 많아지기 때문에 별로 좋은 방법이라고 생각되지 않았다. 따라서 state 하나에 onChange 함수 하나를 만들어 여러개 input 값을 받는 방법을 포스팅한다. return ( ID onChangeUserInfo(e)}/> PW onChangeUserInfo(e)}/> NAME onChangeUserInfo(e)} /> School onChangeUserInfo(e)} /> Mother email onChangeUserInfo(e)} /> console.log(user)} l.. 2023. 3. 23. [React]PrimeReact https://primereact.org/ PrimeReact | React UI Component Library The ultimate collection of design-agnostic, flexible and accessible React UI Components. primereact.org PrimeReact는 Material UI 같은 리액트용 UI 컴포넌트 라이브러리이다. 개인적으로 Material UI보다 낫다고 생각해서 사용법을 간단하게 포스팅 해보려고 한다. 위 URL로 이동하면 이런 사이트로 이동하는데 저 위에 Components 메뉴를 클릭한다. 그럼 이 화면이 뜨게 되는데 DownLoad에 있는 npm install primereact primeicons (혹은 yarn을 쓴다면 .. 2023. 3. 15. [React]리액트란? 리액트란 페이스북에서 개발한 유저 인터페이스 라이브러리이다. 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해주는데 페이스북, 인스타,넷플릭스 등 많은 큰 서비스에서 사용하고 있다. 리액트는 Virtual DOM이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저 인터페이스를 렌더링하여 최소한의 DOM처리로 컴포넌트들을 업데이트 할 수 있게 해준다. Virtual DOM과 DOM 먼저 VirtualDOM과 DOM에 대해 알아보자면 DOM이란 객체를 통하여 구조화된 문서를 표현하는 방법을 말한다.(이를테면 xml이나 HTML 같은) 트리 형태로 되어있어 특정 노드를 찾거나 수정, 제거, 삽입 할 수 있다. 문제는 DOM은 동적 UI에 최적화 되어있지 않다는 것이다. 이전에는 자바스크립트나 제이.. 2023. 1. 15. 이전 1 2 3 다음 반응형
