⏳ 2023. 6. 5. - 2023. 6. 11. 리액트 너란 녀석 참.. 낯설다.. 9주차에는 지금까지 배운 기술로 회원가입 폼을 구현하는 시간을 보냈다. 아직까지는 js가 훨씬 익숙해서, js로 로직을 만들 때는 아 이건 이렇게 저건 저렇게 팍팍 생각이 났지만 리액트로 코드를 작성할 때는 굉장히 굉장히 어색했다. 구현 규모가 작아서 js에서 리액트로 바뀌는 이점을 크게는.. 못 느꼈지만, 큰 프로젝트에서 리액트는 빛을 발한다고 하니! 그날을 기다리며.. 공부하자! 아, 리액트로 구현한 폼은 실시간성이 보장되는 느낌이라 훨씬 유용해보였다. 다시 노션으로.. 리액트는 모르는 거 투성이라 실시간으로 노션에 정리하는 것이 훨씬 나을 것 같다고 판단했다. 그리고 왜 노션이 예뻐보이냐 리액트 선택 강의는 노션..

⏳ 2023. 6. 5. - 2023. 6. 11. 제어 컴포넌트와 비제어 컴포넌트 reference : [강의안] 제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트 : 리액트가 제어하는 폼 엘리먼트 비제어 컴포넌트 : 리액트로 제어되지 않는 폼 엘리먼트 폼 엘리먼트? Form을 구성하는 DOM 자체에서 상태를 가지는 DOM 엘리먼트(input, textarea, select) 리액트의 state가 아니라 DOM 자체의 state이기 때문에 리액트가 상태를 제어할 수 없다. 리액트가 DOM의 상태에 접근하려면 ref를 통해 접근해야 한다. 폼 엘리먼트가 아닌 다른 DOM 엘리먼트는 리액트의 state로 상태를 관리한다. 컴포넌트 내 직접 관리 부모로부터 props를 통해 상태 내려받기(상태 리프팅) 전역 s..

⏳ 2023. 6. 5. - 2023. 6. 11. 정규식 RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com 정규식 연습은 여기서! 회원가입 예제 GitHub - iam454/signup-app Contribute to iam454/signup-app development by creating an account on GitHub. github.com 알게 된 점 em을 사용하면 확대/축소 효과를 줄 수 있다. 코드를 처음 짤 때는 더러울(?) 수 있지만, 리팩토링을 통해 수정하면 된다! 이제 React로 구현 가보자고~

⏳ 2023. 5. 29. - 2023. 6. 4. 선택과정 하나 끝!! https://movie-app-iam454.vercel.app/ 리액트 시작 전에 끝내는 목표 달성 케케 😝 컴포넌트 구조로 영화 검색 사이트를 클론코딩을 해보며 많은 것을 알게 되었다. 특히 스켈레톤 UI에 대해 알게 되어 좋았다. React 시작 8주차부터 리액트가 시작되었다! 이번 주차는 맛보기로, 리액트에 사용되는 전반적인 것을 다룬 듯하다. 왜 많은 회사들이 리액트를 택했는지 느낄 수 있었다. 바닐라 js에 비해 코드가 깔끔해보이기도 하고, 유지 보수도 더 쉬워보였다. 그러나.. 더 어려웠다.. 강의 외에도 추가적인 공부는 필수였다. 리액트의 렌더링은 어떻게 일어나는가? 리액트에서 렌더링이란, 컴포넌트가 현재 props와..

⏳ 2023. 5. 29. - 2023. 6. 4. 상태 끌어올리기 부모 요소에서 자식 요소의 상태를 알아야 하는 경우, 상태 리프팅을 할 수 있다. 상태를 관리하기 위해 리프팅을 많이 하면 그만큼 드릴링(반대의 개념)을 야기하니 조심해야 한다고.. 한다. 다음은 상태 리프팅의 예시이다. 부모 요소에서 id, password값을 직접 관리하고 함수를 넘겨주는 방식으로 값을 알아내는 방법이다.

⏳ 2023. 5. 29. - 2023. 6. 4. 스타일과 DOM 리액트의 스타일은 props 데이터를 주는 것으로 작성할 수 있다. js와 굉장히 유사하나, class를 className으로 주는 것이 관례이다. js의 getElementById, querySelector처럼 리액트에는 useRef가 있다. 사용하고자 하는 요소에 ref값을 적용하는 것으로 요소를 선택할 수 있다. Error js에는 try catch문을 사용하여 error에 대처할 수 있는데, 리액트는 에러에 어떻게 대응할까? 바로 ErrorBoundary 컴포넌트를 사용하는 것이다. 일부러 에러를 발생시키고, ErrorBoundary 컴포넌트를 사용해보자. 에러가 나올 수 있는 컴포넌트를 ErrorBoundary 컴포넌트로 감싸주..

⏳ 2023. 5. 29. - 2023. 6. 4. 컴포넌트 상태 저번 시간까지 전역 변수를 만들어 바뀌는 값을 처리했는데, 사실 리액트는 useState를 통해 상태를 관리할 수 있다. 저번 시간의 상태 관리를 useState를 통해 만들어보자. 컴포넌트 사이드 이펙트 변경이 일어날 때, 다른 곳에서도 부수적인 효과를 주기 위해 사용하는 훅 useEffect useEffect를 사용하여 localStorage에 저장하는 효과를 만들어보자. 동기적인 처리를 위해 useState의 인수로 함수를 전달할 수 있다. useEffect의 두 번째 인자는 의존 배열인데, 3가지 상황이 있을 수 있다. 아예 없는 경우 : 컴포넌트가 리렌더링될 때마다 호출 빈 배열인 경우 : 처음에만 호출 의존값이 있는 경우 : 처..

⏳ 2023. 5. 29. - 2023. 6. 4. 리렌더링 js로 작성한 코드는 변경 사항이 있는 경우, 요소를 처음부터 다시 생성해서 변경된 내용을 적용한다. 이러한 방식은 Reflow, Repaint에서 최적화 고민의 원인이 된다고.. 한다. 그렇다면 리액트는? React 엘리먼트는 불변객체인데, 어떻게 바꿔? -> 변경 사항이 있으면 재조정을 통해 변경 사항을 적용한다. 바뀐 부분만 골라서 리액트가 알아서 바꿔주기 때문에 굉장히 편하다~ 이벤트 핸들링 js와 거의 똑같지만.. onEvent를 카멜케이스로 작성한다. 다음은 전역 변수로 상태 객체를 선언하여 검색창을 만든 예시이다.