data life

이번 프로젝트 로그인/회원가입 구현을 맡으면서 사용한 react-hook-form에 대해 정리해보려고 합니다. react-hook-form은 form의 validation을 도와주는 라이브러리로 성능적으로도 더 뛰어나다고 합니다만 자세한 건 공식문서를 참고해보시는 걸로!! 📌 참고로 - 쓰면서 굉장히 유용했고 자주 이용했던 부분 위주로 설명할 예정입니다. - 공식문서는 다크모드로 보시길 추천드립니다. 1. useForm form을 만들기 위해서는 useForm을 이용해야합니다. const { register } = useForm({ mode: 'onSubmit', reValidateMode: 'onChange', defaultValues: {}, resolver: undefined, context: un..

Form과 제어 컴포넌트 Form element 폼 요소는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. 그러나 기본적으로 리액트에서도 state를 이용하여 변경된 상태를 setState를 통해 업데이트를 하는데 그렇다면 이 둘은 어떻게 같이 쓰이면서 관리할 수 있을까?? 💡바로 제어 컴포넌트를 이용하는 것이다. 제어 컴포넌트란? 데이터를 변경할 수 있는 모든 방법에 대해 이벤트 헨들러를 작성하고 React 컴포넌트를 통해 모든 입력 상태를 연결하는 방식으로 기존에 우리가 사용하던 handle~ 방법이라고 이해하면 된다. 그러나 이벤트 헨들러 작성이 많아지게 된다면 굉장히 번거롭기 때문에 다른 방식으로도 폼 요소의 업데이트 구현이 가능하다. export default fu..

이벤트 처리 " React element 에서 이벤트를 처리하는 방식 = DOM element 에서 이벤트를 처리하는 방식 " 리액트와 DOM 엘리먼트의 이벤트 처리 방식은 매우 유사하지만 몇가지 다른 점이 있다. // html Click // react Click 소문자가 아닌 camelCase를 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달 다른 차이점으론 false를 반환해도 기본 동작을 방지할 수 없다. 따라서, preventDefault를 명시적으로 호출해주어야 함!! // html Submit // react function Submit(){ function handleSubmit(e){ e.preventDefault(); console.log('Success submit!..

여러 개의 컴포넌트 반복 출력하기 ✅ map 활용 return ( {cardInfos.map((info)=>( ))} ) Key 리액트가 어떤 항목을 변경, 추가, 삭제 시에 식별하는 것을 도와주는 역할을 한다. 즉, 요소의 고유성을 부여하기 위함으로 배열 내부 요소에 지정해주면된다. 대부분 데이터의 ID를 key로 부여한다. 만일 ID가 존재하지 않는다면 인덱스를 key로 사용해주도록 한다. ※ map() 함수 내부에 있는 요소에 key를 넣어주는 것이 좋음 return ( {cardInfos.map((info)=>( ))} ) 하지만, 인덱스를 사용하는 것은 리액트로부터는 권장하지 않는다. 왜냐하면 성능 저하나 state 관련 문제가 발생할 수 있기 때문인데 첫번째 리스트 두번째 리스트 첫번째 리스트..

⭐useEffect()⭐ 함수 컴포넌트 내에서 side effects를 수행하도록 해준다. export default function MyComponent() { useEffect(() => { // Code here will run after *every* render }, []); return ; } 즉, 컴포넌트가 렌더링될 때마다 React는 화면을 업데이트한 다음 내부의 코드를 실행한다. 이때, 두 가지 인자를 받는데 ✅빈배열을 넣을 경우, componentDidMount 처럼 동작하게 된다. ✅빈배열을 넣지 않을 경우, componentDidMount + componentDidUpdate 처럼 동작한다. export default function MyComponent(props) { const ..

컴포넌트가 처음으로 렌더링 될 때, DOM에 mount 컴포넌트가 DOM에서 빠졌을 때, unmount ❓생명주기를 왜 알아야하죠? 최근에는 함수 컴포넌트를 사용하고 있지만 리액트 초기엔 클래스 컴포넌트를 많이 이용하였다. 클래스 컴포넌트는 기본적으로 생명주기에 따라 메서드를 제어할 수 있게 되어있고 함수 컴포넌트는 따로 hook() 함수를 이용해 컴포넌트의 mount, unmount 되는 시점에 맞춰 제어가 가능하다. 클래스 컴포넌트를 이해하기 위해서는 생명주기를 알아야한다. 그렇다면, 먼저 함수 컴포넌트와 클래스 컴포넌트를 비교해보자. export default function Clock(){ const [date, setDate] = useState(new Date()); return( Hello!..

state 끌어올리기 function A(){ return( ); } 위와 같은 구조의 컴포넌트들이 존재한다고 가정해보자. 만일 C컴포넌트에서 B컴포넌트가 가진 state가 필요하다 할 때의 상황이라면 어떻게 하는 것이 좋은가? B컴포넌트와 C컴포넌트가 가지고 있는 state를 A컴포넌트로 끌어올려 사용하면 편리하지 않을까? 이때, 바로 props를 이용하여 state를 주고받을 수 있다. 섭씨 기준 100도 이상 또는 화씨 기준 212 이상이면 끓는 물, 아니면 끓지 않는 물이라는 메세지를 보여주도록 구현한 화면이다. 이때, 섭씨와 화씨는 서로 다른 state를 갖도록 구현하도록 함. 동일한 기능은 다음과 같다. input에 숫자 입력 특정 기준치에 이상이면 끓는 물, 아니면 끓지 않는 물이라는 메세지..

state 업데이트는 비동기적일 수 있다. export default function App() { const [number, setNumber] = useState(1); const add = () => setNumber(number + 1); const subtract = () => setNumber(number - 1); const multiplyBy2 = () => setNumber(number * 2); const multiplyBy2AndAddBy1 = () => { multiplyBy2(); add(); }; return ( Number : {number} + 1 - 1 *2 *2 + 1 ); } 다음과 같이 버튼을 클릭하면 해당 연산을 하도록 구현하였다. 잘 작동이 되는지 확인해보면 *2 ..

⭐State ⭐ 1️⃣ state를 쓰는 이유 2️⃣ useState() 3️⃣ state 불변성 4️⃣ state 다루기 1️⃣ state를 쓰는 이유 버튼 클릭시 ,+1 이 되도록 구현하는 카운터로 예시를 들어봄 /**App.js**/ function App(){ return ( ) } export default App; /**Counter.js**/ export default function Counter(){ let count = 0; return( (count +=1)}>+1Counter : {count} ); ➡️카운터 클릭 시, 변경되지 않는 것을 확인할 수 있다. 왜냐하면, 카운터는 단지 함수구문이기 때문에! 따라서, 함수 컴포넌트 내에서 상태를 관리해야하는 일이 필요하다. 🤔컴포넌트가 상..

라이브러리 vs 프레임워크 리액트 공식 홈페이지에 들어가면 사용자 인터페이스(UI)를 만들기 위한 자바스크립트의 라이브러리라고 소개되어있다. 프레임워크와 라이브러리에 대한 차이점 및 개념들을 짚고 넘어가기 위해 정리를 해보도록 하자! 프레임워크란? 말그대로 뼈대(framework)다. 단, 기능개발을 위해 일정한 형태와 필요한 기능을 갖추고 있는 뼈대인 것이다. 웹 어플리케이션을 만들기 위해선 다음과 같은 기능들이 필요하다. 대표적인 프레임워크 예시 > Java : Spring Python : Django, Flask 안드로이드 : Android 아이폰 : Cocoa Touch Web Application : Angular, Vue.js 등 루비로 작성된 MVC패턴을 이용하는 Ruby on Rails 그..