리액트 기초

백엔드 개발자를 희망하고 있어서 스프링에 대해 배우고, 간단한 사이드 프로젝트를 진행중에 있었다.나는 프론트에 대해 알지 못하므로, 클라이언트가 request를 보내면, 타임리프를 이용해서 서버쪽에서 뷰를 구현하고 클라이언트에게 html을 response로 보내고 있었

html은 웹페이지를 구성하는 기본 마크업 언어수많은 페이지가 존재하면 수십개의 html이 필요하다\-> Multi Page ApplicationSPA(Single Page Application)하나의 페이지로 복잡한 웹사이트를 표현하는 것body안에 콘텐츠가 들어와서

리액트 a javascript library for building user interfaces 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리 라이브러리 자주 사용되는 기능들을 정리해 모아 놓은 것

html 안에서title 이 해당 페이지 탭의 이름link를 통해 css와 연결 - 같은 디렉토리에 있어야함리액트 가져오는 명령어리액트 컴포넌트 가져오는 명령어새로운 리액트 애플리케이션를 만들기 위해서 npx create-react-app <이름> 쓴다.npm

ㄹㅇ

Element란 리액트 앱을 구성하는 가장 작은 블럭들리액트의 Virtual DOM에 존재하는 element는 React Elements브라우저 DOM에 존재하는 element는 DOM elements리액트 element는 DOM element의 가상 표현DOM ele

리액트는 컴포넌트로 이루어져 있고하나의 컴포넌트는 여러개의 컴포넌트의 조합으로 구성될 수 있다리액트의 컴포넌트도 함수처럼 입력을 받아서 출력을 밷는다하지만 입력과 출력이 일반적인 함수와는 조금 다르다React Components 의 입력과 출력입력: Props출력: R

\-> 리액트 컴포넌트의 변경 가능한 데이터state는 자바스크립트의 객체state는 개발자가 정의한다렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함(클래스 컴포넌트) state는 생성자에서 정의한다(함수 컴포넌트) use state라는 hook을 사

function component는 state를 사용하지 못하고, Lifecycle에 따른 기능 구현이 불가능하다 대신 Hooks를 이용하면 class component의 기능을 모두 이용할 수 있다 Hooks useState() state를 사용하기 위한 Hook

컴포넌트 안에 하위 컴포넌트를 넣을때{props.children}으로 지정해주는것\-> 알아서 해당 컴포넌트 밑으로 들어감props의 변수로 지정해주는것