빠르게 성장하는 개발자

목차1. 하나의 Form에 여러개의 공통된 Input을 쓴다면?2. Use Controller 맛보기2-1. 파라미터2-2. 리턴해주는 객체3. 이제 진짜 사용해보자 컨트롤러4. Tailwind를 사용해서 더 아름답게 디자인하기참고한 글 1. 하나의 Form에 여러개의 공통된 Input을 쓴다면?컴포넌트 팡인 우리 조🧚🏻 답게 이미 귀여운 inpiut 디자인까지 다 뽑아두었건만!!!react-hook-form을 쓰면 내가 만들어둔 귀여운 디자인의 Input을 못쓰는 거 아닌가!? 인라인 스타일로 css 다 다시 박아넣으라구?!!? 당장 재.활.용 내놔. 라고 생각할 때 아주 소중한 글을 발견했다. 바로 useController라는 훅을 사용하면 내 입맛대로 custom이 가능하다는 것!!자세한 것은 공식..

공식문서를 따라서 가볍게 시작해봅시다. 우리 프로젝트는 TypeScript를 사용하기 때문에 TypeScript를 기반으로 설명을 이어가겠습니다.Get StartedInstalling React Hook Form only takes a single command and you're ready to roll. Copy The following code excerpt demonstrates a basic usage example: ♦ This video tutorial illustrates the basic usage and concepts of React Hook Form. One of the key concepts in React Hook Form is to register your component i..

요즘 맡고 있는 프로젝트에서 🚀로그인 & 회원가입 부분을 담당하고 있다.React는 처음인데다 이전에 야매로 만들었던 관통 프로젝트와는 다르게 토큰도 access token과 refresh token을 사용하고, 회원가입시 메일로 인증과정을 거치는 나름 업그레이드 버전 회원가입이다.(그리고 SNS 회원가입 & 로그인도 있다.) 앞으로 올라오는 게시글 시리즈는 리액트 초보의 로그인 & 회원가입 고군분투 과정이다. 나같은 React Newbie들에게 이 글을 바친다. 1. React-hook-form 이 무엇이냐리액트에서 회원가입, 정보기입 등 다양한 form을 사용할 일이 많을 것이다.그때마다 물론 useState 같은 hook을 사용하여 상태관리를 하고, 유효성 검사용 함수를 만들어서 검사를 진행하고 유..

1. Vue를 기억하며어쩔 수 없이 Vue를 기억하게 되는건 나의 첫 사랑이 아니라 처음으로 배운게 Vue라서.Vue에서도 부모 → 자식 컴포넌트로 객체를 전달 할 때 ‘props’ 라고 사용했다.React에서도 똑같다. function Welcome(props) { return Hello, {props.name}; } const root = ReactDOM.createRoot(document.getElementById('root')); const element = ; root.render(element) 2. Vue와의 큰 차이!Vue는 props로 받는 자식쪽에서 반드시 prop의 data type을 지정해주었다.하지만 React는 그럴 필요가 없다.⇒ 이게 단점이 될 수도 있는 것이 data 형식을..

1. 컴포넌트에 대한 이해React 2번째 글에 컴포넌트에는 ‘함수형’ 컴포넌트와 ‘클래스형’ 컴포넌트가 있다고 작성했었다.구분하는 방법은 간단하다! 그냥 class로 시작하면 컴포넌트 클래스이고, function으로 시작해서 return이 있으면 함수형 컴포넌트 이다.2. State일반적으로 함수형 컴포넌트에서는 state가 없는 컴포넌트 라고 알려져 있다.하지만, HOOK 의 등장으로 달라졌다!(나는 노마드코더님의 강의를 들으면서 진행했는데, 이분은 클래스 컴포넌트를 아예 알려주지도 않았다. ) 함수형 컴포넌트에서 state를 사용하려면 가장 기초가 되는useState()라는 훅을 이용하면 된다.const [counter, setValue] = useState(0); const onClick = ()..

1. Vue 처럼 React 에서도.맨 처음 vue를 배울 때, html의 script부분에 링크를 달아서 CDN방식으로 사용한 경험이 있다.React도 처음에 그렇게 배웠다.vue-cli방식으로 넘어간 것처럼, react도 create-react-app이라는 방식이 있다.npx create-react-app 의 형식으로 만든다.2. 장점?컴포넌트의 분리예전에 CDN방식을 사용한 것과 다르게, 목적에 따라 js파일을 분리해서 사용할 수 있다. css의 사용니꼴라스 선생님이 “super cool 😎” 한 부분이라고 강조한 것이 있다.바로 평소에 css에 class를 사용했으면 중복되지 않기 위해서 꼭 클래스 이름을 기억해야 했다.(클래스 이름 짓는 것도 일이다.)하지만 React에서는 다르다~App.mod..

1. State 짤막 Review Vue에서는 Vuex라는 라이브러리를 설치해서 app에 있는 모든 component의 중앙저장소인 state를 관리했다. 그렇다면 React에서는? state는 사전적 의미로 상태 라는 뜻이다. 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다. 각각의 Component에서 state를 관리한다. Props는 컴포넌트에 전달되고, State는 컴포넌트 '안'에서 관리된다. state는 직접 수정하지 않고! setState라는 함수를 통해 수정해야 한다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } rende..

1. Element 리액트 공식문서에는 Element의 정의에 대해서 이렇게 서술한다. 엘리먼트는 React 앱의 가장 작은 단위입니다. const element = Hello, world; React 엘리먼트는 일반 객체이며 불변(immutable) 하다. 즉, 한 번 생성된 이후에는 자식이나 속성을 변경 할 수 없다. 만약 내용을 변경하고 싶다면, 새로운 객체를 만들어서 rendering 하는 방식으로 사용한다. const root = ReactDOM.createRoot( document.getElementById('root') ); const element = Hello, world; root.render(element); 2. Component 그렇다면 컴포넌트는 무엇일까? Vue에서 사용한 것 ..