[react][inflearn]

HTML에 대한 간단한 내용은 이전에 작성한 HTML 기초 내용을 참고하도록 하자.SPA MPASingle page ApplicationMulti Page Applicationhtml:뼈대script언어 특징: 런타임레코드 해석자료형:데이터의 유형변수를 선언할때가 아닌

리액트란?\->자바스크립트 UI 라이브러리 : 화면을 만들기 위해 필요한자주사용되는 기능들을 정리해 모아놓은 것프레임워크(ngular.js , vue.js) vs 라이브러리(react.js)가장 큰 차이 = 프로그램의 흐름에 대한 제어 권한프레임워크: 제어권한을 개발

jsx란?자바스크립트의 확장문법a syntax extension to JavaScriptJavaScript + XML/HTMLelement라는 변수에 h1 tag를 대입create element의 역할JSX를 사용한 코드와 사용하지 않은 코드의 비교JSX는 파라미터는

Elements의 정의와 생김새Element : 리액트 앱을 구성하는 가장 작은 블록들Descriptor => Element화면에 나타나는 내용을 기술하는 자바스크립트 객체Virtual DOM에 존재하는 Element => React ElementsBrowser DOM

Components and Props(매우 중요함니다^^7)Component - 리액트는 컴포넌트 기반이다.레고블록조립하듯 컴포넌트들을 모아서 개발한다!위의 경우 A와 B 컴포넌트를 구성하였는데같은 컴포넌트를 반복적으로 구성함으로써 전체적인 코드의 양을 줄일수있다~!\

State상태\-> 리액트 Component의 상태(데이터->변경가능한 데이터)State는 개발자가 정의한다.렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함왜냐면state가 변경될 경우 재 렌더링을 해야하는데데이터 흐름에 불필요한 값이 포함된 경우불필

함수컴포넌트는 코드도 간결하고생애주기에 맞춰서 특정코드가 실행되게 할 수 없었음그래서 대신 사용되는게 훅!훅 : 갈고리원래 실행되는 코드에 갈고리처럼 같이 끼어들어 실행되게 하는 의미로 사용됨<생애주기랑 느낌이 꽤 비슷하긴하다>훅 앞에는 use를 붙여주어야 함!!

List\-목록 = Array\-JavaScript의 변수나 객체들을 하나의 변수로 묶어놓은 것\-React에선 Array를 이용해 다수의 Element를 렌더링할 수 있음EX)Result)Component화Key아이템들을 구분하기 위한 고유한 문자열key의 값은 해당

Forms양식사용자로부터 입력을 받기 위해 사용Controlled Components = Input form Element모든 데이터를 state에서 관리 + setState\-사용자의 입력을 직접적으로 제어할 수 있음!\-Textarea\-Select Tag\-Fil

Shared StateState에 있는 데이터를 여러개의 하위 컴포넌트에서 공유하여 사용하는 경우하위 컴포넌트들이 각자 State에 데이터를 갖고 있을 필요가 없다하위 컴포넌트의 state를 공통 상위 컴포넌트로 올려서 사용한다{Project Name} / src /

Composition여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 Composition 사용 기법여러개의 컴포넌트를 어떻게 합칠 것인가?ContainmentBOX형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다children이라는 prop을 사용해서