React

이제부터 대망의 React에 대해서 배워보도록 합시다.

이번에는 컴포넌트의 Class와 function을 살펴보도록 하겠습니다.

이번에는 JavaScript의 XML인 JSX에 대해서 알아봅니다.

이제부터 컴포넌트를 실제로 만들어보겠습니다. React.createElement를 이용하여 컴포넌트를 만들어보는 것이 React와 JSX에 대한 깊은 이해를 가질 수 있도록 돕기 때문에 이를 배워보도록 합니다.

이번에는 React의 컴포넌트에서 중요한 개념인 Props와 State에 대해 살펴봅시다.

JavaScript에서 우리는 addEventListner라는 이벤트 핸들러를 사용하였습니다. React에서는 어떠한 방식으로 기능을 구현할 수 있는지 살펴봅시다.

리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메소드를 오버라이딩할 수 있게 해줍니다. 이러한 과정에서 중요한 것이 라이프사이클이며, 이에 대해 알아보도록 합시다.

이전 시간에 이어서 리액트 라이프사이클에 대해 알아보도록 합시다. 이번에는 16.3 버전 이상의 변경된 내용에 대해 살펴봅니다.

이번에는 실제로 React의 Project를 만드는 방법에 대해 알아봅니다. 지금까지는 CDN을 사용했지만, 본격적으로 실제 현업에서 사용하는 Project를 함께 만들어봅시다.

CRA를 통해 개발환경을 설정하였습니다. 이번에는 ESLint를 알아보고 설정해보도록 합시다. 추가적으로 Vue.js의 ESLint를 참고하실 분들은 이 곳에서 확인해주시면 됩니다.

ESLint에 이어 huksy라는 패키지에 대해 알아보도록 합시다. 자세한 내용은 husky의 깃허브 페이지를 참고해주시기 바랍니다.

이번에는 지금까지 배운 패키지를 활용하여 git을 통해 commit을 진행하기 전에 코드를 점검하고 수정할 수 있도록 설정하는 lint-staged 과정을 알아보도록 하겠습니다.

바닐라 자바스크립트로 클론코딩한 위스타그램을 리액트화하는 작업을 하고 있습니다. 그중 댓글 기능을 리액트 문법으로 작성한 코드를 리뷰해도록 하겠습니다.

리액트의 개념인 Key, List에 대해 자세히 알아봅니다. 그리고 함께 map 함수의 매개 변수를 props의 속성 값으로 지정할 수 있는지에 대해 알아봅시다.

제발 400번대가 아니라고 해줘 부탁이야.

⛔️Warning!⛔️ 해당 리액트 퀘스트는 초급 레벨의 몬스터이니 리액트 천상계의 고이신 분들은 초보자들의 먹이로 남겨주시길 부탁드립니다.

this.props.children을 이용한 컴포넌트 재사용에 대해 알아봅시다.

map 메소드에서도 객체를 통해 각각의 로직을 구현할 수 있다는 사실!

절대 대단하지 않은 다소 깜찍한 검색 기능

컴포넌트의 정상에 올라서는 기분은 어떨까?

React Hooks의 사용을 CODE를 통해 ARABOJA.

현재 나의 몸엔 프로바이오틱스가 필요해.. 💊

🚦 잠시만요. 조금만 기다렸다 건너세요.

환경을 생각하며 함수를 재사용해봅시다 ♻️

대체 createRef가 뭐냐고 🤯

useReducer, useMemo 한입만! 👨‍🍳

SPA 라이브러리 React와 함께 비동기 데이터 흐름에 대해 살펴보겠습니다.