And Brain said,

목차 1. 컴포넌트(Component)와 Props 2. 상태 관리(useState, useReducer, useContext) 3. 사용자 입력 처리 (Material-UI) 4. 폼 및 유효성 검사 (react-hook-form) 5. 애니메이션 (React Transition Group, CSS-in-JS) 6. 네비게이션과 라우팅 (Next.js) 7. 비동기 처리 (React Hooks, axios) 오늘은 React의 기초 이론에 대해서 알아보는 시간을 가져보자. 언어는 타입스크립트로 리액트와 타입스크립트를 함께 사용하여, 타입 안정성을 제공하고 오류를 줄여보도록 하자. 1. 컴포넌트(Component)와 Props 컴포넌트(Component)란 React의 가장 기본적인 구성 요소로, UI를..

- Redux? Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다. 여러분은 Redux를 React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다. Redux는 매우 작지만(의존 라이브러리 포함 2kB), 사용 가능한 애드온은 매우 많습니다. 위 글은 Redux 공식 홈페이지의 Redux에 대한 설명이다. 이해가 안 되더라도 잠시 Redux는 제쳐두고 Redux를 이해하기 위해 먼저 Flux 패턴에 대해 간단히 배워보도록 하자. - Flux..

- 서문 만약 당신이 이미 개발자거나, 프론트엔드 개발에 관심이 있다면 React.js에 대해 최소한 들어는 봤을 것이다. 당신이 React를 좋아하지 않더라도 의심의 여지없이 React는 현재 프론트엔드의 왕이다. 프론트엔드 왕의 자리를 넘보는 수많은 시도가 있었고 지금도 계속되지만, 2023년 아직까지는 그리고 한동안은 React가 왕의 자리를 굳건히 지킬 것 같다. 기술적으로 프론트엔드 개발자는 아니긴 하지만 최근 내가 가장 많이 공부했고 개발한 영역이 React기도 하여 가볍게 이 왕의 길을 되짚어보고자 한다. - React 이전 시대 React가 탄생하기 전 jQuery가 있었고 jQuery는 Ajax와 DOM을 다루어 기존 서버에서 HTML을 작성하는 불합리성을 타파하고 본격적으로 프론트엔드의..

https://theworldaswillandidea.tistory.com/66 SSR과 CSR의 기본적인 이해도가 필요합니다. Next.js는 React의 프레임워크다. 다들 알다시피 React는 라이브러리기 때문에 프로젝트 초반에 설정해줘야할 것들이 꽤 있다. 하지만, Next.js를 사용한다면 React의 설정들을 그저 Next.js에게 의존하고 다음 단계로 넘어가면 된다. 물론 이런 편리함때문만이 Next.js를 사용하는 이유는 아니다. 자, 그럼 본격적으로 Plain React를 넘어 React의 다음 단계를 알아보자. Next.js는 기본적으로 React를 사용하면서 서버사이드 렌더링을 쉽게하기 위해 사용한다. Plain React만으로 서버사이드 렌더링을 구현할 수 있는 방법이 존재하긴 하지..

오늘은 현시점 프론트 진영의 선두를 달리고 있는 조합 React + TypeScript 조합으로 간단한 예제를 만들어볼 것이다. 일단 리액트 프로젝트를 만들어주자. 이후 만들어진 프로젝트 경로로 들어가준뒤 yarn start를 해주면 이 화면을 볼 수 있을 것이다. 이제 src 폴더 내 App.tsx로 간다. 간단하게 작성해준다. 끝 Thanks for watching, Have a nice day.