📝 들어가기 전 Form은 웹 사이트나 어플리케이션에서 개발해 본 경험이 있다면 필수로 다뤄봤을 부분이다. 로그인, 회원가입, 게시글을 등록하거나 등등 많은 부분에서 form을 쉽게 접할 수 있기 때문이다. react를 사용한 여러 프로젝트에서 매번 controlled component를 사용하여 Form을 개발했다. React에서는 state로 관리하면 실시간으로 사용자가 입력한 값을 확인할 수 있는 등의 이유로 추천하고 있기 때문이다. contolled component로 Form을 개발한다면, 아래와 같이 input의 값을 관리하기 위해 state 변수들을 만들 것이다. 그리고 각각 onChange 이벤트들을 추가하고, 우리는 input을 업데이트할 때마다 state가 함께 update되며 값을 c..

🔎들어가기 전 react로 개발할 때 아래와 같은 패턴을 많이 접했을 것이다. return ( ...someting ) 잘 알고 쓰고 있다면 베스트! 하지만, 나는 그냥 요렇게 감싸야 빨간 밑줄이 안쳐져서? 또는, 단순히 여러개의 엘리먼트들을 그룹화하고 싶을 때 사용하고 있었다. 그러던 중 아래와 같은 코드를 보게 되었다. ...someting 응? 이게 뭘까? 알고 보니 와 같은 의미였다. 제대로 모르고 그냥 쓰다보니 마치 계피와 시나몬이 다른 건 줄 아는 느낌이었다..^^;;... 그래서 이번 기회에 간단하더라도 짚고 넘어가자! 라는 의미로 포스팅하게 되었다. 📍Fragments란? Fragment는 React v16에 추가된 기능으로, DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화한다. ..

📝 들어가기 전 프로젝트에서 React를 실제로 사용하고 있어서 React의 장점에 대해서는 어느 정도 파악하고 있다고 생각했다. 그런데 갑자기 의문이 들었다..! 화면 깜빡임 없이 변경사항만 부드럽게 화면에 표시해주는게 사용자 경험이 향상되는데 도움을 주는 건 알겠어, 근데 Virtual DOM은 왜 쓰는거지? 실제 DOM 조작이 왜 비효율적인거지? 어떤 부분 때문에 비효율적인거지? 등등.. 브라우저 작동원리에 대한 이해도가 부족함에서 오는 의문들이었다. 그래서 이번 기회에 React의 작동원리도 제대로 짚고 넘어갈겸 브라우저 작동 원리 그리고 왜 DOM을 직접 조작하는게 비효율적인지에 대해서 공부해보려고 한다. ps. 다른 분들이 잘 정리해놓은 글을 스스로 공부하기 위해 요약한 정도의 글이라 부족할 ..

이슈: F/E에서 쿠키를 설정하는 과정에서 어떤 곳에서는 react-cookie 라이브러리를 사용하고, 어디서는 react-cookies 를 사용하고 어디서는 universal-cookie를 사용하고 있었다.. 이 라이브러리는 어떤 차이점이 있길래 각각 쓰이고 있는건가 정리하고 싶어서 남긴다. react-cookie Universal cookies for React (말그대로 react에서 사용하기 위한 쿠키 라이브러리) React The library for web and native user interfaces react.dev universal-cookie Universal cookies for JavaScript react-cookie보다 더 업그레이드된 모듈 [react-cookie]() - U..