개발세발

import React from 'react'; import { useForm, Controller } from 'react-hook-form'; import Select from 'react-select'; function App() { const { handleSubmit, control, register } = useForm(); const onSubmit = (data) => { console.log(data); }; //react-select는 선택된 항목을 { value, label } 형태의 객체로 반환 return ( ( )} /> Submit ); } export default App; import React from "react"; import { useForm, Controller }..

React JS 는 어플리케이션을 아주 interactive 하도록 만들어주는 library react-dom : 모든 react element들을 HTML body 에 둘 수 있도록 해줌 [자바스크립트 환경에서 script 태그를 이용해 react사용해 보기] 개발할 때 리액트와 자바스크립트의 제일 큰 차이는 리액트는 모든 것이 js에서 시작한다는 점일 것이다. 이게 개발하면서도 아직 제일 헷갈리는 점이긴 한데, 재사용성이 뛰어난 컴포넌트를 만들어서 적재적소에 넣음으로서 효율성을 증대시킨다..가 요점이지 않을까 👀 대소문자 오타가 있는데 아무런 오류메시지도 띄워주지 않는 이녀석들... 그래도 콘솔창 열어보면 나오긴 한다 Babel - JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 것 ..

웹페이지 만들면서 아이콘이 필요할 때 웹 아이콘을 이용해서 넣으면 좀 더 깔끔하고 편하게 넣을 수 있다. 평소 자주 사용하던 아이콘 툴킷은 font-awesome이다 react로 개발을 시작하면서 리액트 환경에서도 font-awesome이 사용되는지 몰랐는데 되긴 된다! 하지만 평소 사용했던 바와 같이 무료로 사용할 수 있는 아이콘이 한정적이라는 치명적인 단점이 똑같이 있었다. https://fontawesome.com/v5/docs/web/use-with/react React The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always..

고차 컴포넌트 : 컴포넌트 로직을 재사용하기 위한 react 기술 : 컴포넌트를 가져와 새 컴포넌트로 반환하는 함수 ➡ 횡단 관심사를 분리하는 데 사용 - 횡단 관심사 (Cross-cutting Concerns) : 핵심적인 기능이 아닌 중간중간 삽입되어야 할 기능이지만 모든 핵심관심사항(주요 기능)에 공통적으로 들어가는 코드 cf. 횡단 관심사는 '중복'이라는 문제가 존재하고, 이를 해소하기 위해 나온 기법이 AOP(관점지향 프로그래밍, Aspect Oriented Programming) - AOP와 OOP는 다른 방식이 아니라 OOP가 더 효율적일 수 있도록 하기 위해 나온 것이 AOP (AOP는 OOP에 기반한다) ES6이전에는 횡단관심사에 대한 대처법으로 createReactClass를 통해 mi..