차근차근 React 🐾

브라우저를 열고 사이트에 들어가면 보여지는 것 (UI: User Interface) 과 할 수 있는 것 (UX: User Experience) 이 굉장히 많다. 이러한 이유로 요새는 웹 페이지(Web Page)라는 단어보다 웹 애플리케이션이(Web Application

이게 바로 JSX 이다 ! JSX: Javascript XML(syntax extension for JavaScript / extensive markup language)그럼 XML은? : HTML의 한계를 극복한 마크업 언어특징 : 호환성 / 확장성이 뛰어남, t

component : 재활용 가능한 UI 구성 단위컴포넌트의 종류, 즉 컴포넌트를 선언하는 방식에는 두 가지가 있다.Class형 컴포넌트(Class Component)함수형 컴포넌트(Functional Component)1) Class Component클래스형 컴포넌트

state : 상태단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값 으로 이해state는 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다.클래스형 컴포넌트에서

props : properties(속성)단어 뜻 그대로 컴포넌트의 속성값을 의미.props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.props를 통해 부모 컴포넌트로부터 자

: Single Page Application: 말 그대로 한 개의 페이지로 이루어진 애플리케이션을 의미기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다. 이렇게

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지가 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.프로젝트 진행 시 가끔 컴포넌트를 처음 랜더링할 때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어

mock data란?mock: 거짓된, 가짜의이름에서 알 수 있듯이 mock data 는 가짜 데이터, 샘플 데이터즉, 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플용으로 만든 데이터 mock data가 필요한 이유API 가 아직 준비중인

라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것.(Dynamic Routing)React Router에서는 두 가지 방법을 통해 유동 라이팅 기능을 구현할 수 있습니다.1\. Query parameters2\. URL parameters\*\*이

참고: 크롬에서 테스트한 결과로 디테일한 현상은 타 브라우저와 다를 수 있습니다. 그리고 테스트 코드는 typescript 기반으로 제작되었는데, 인자 값을 any 타입으로 정의한 것은 테스트 코드를 간소화하기 위한 것으로 실제로는 타입에 맞게 지정해 주어야합니다.js