[React] 상식
React
= Js Logic + JSX(=Dom)
JSX(Javascript Syntax Extension)
html -> JSX 로 변환
1. input 태그를 / 로 닫기
2. class를 className으로 바꾸기
3. style은 맵핑(json 타입이라는 걸 알게 하기 위해서 매핑을 하는 것)
매핑은 key를 Json타입으로 바꿔달라는 것
const formStyle = {
border: "1px solid #ccc"
}
// 이 부분이 다 들어가기 때문에 inline선언 방식 때 curly braces가 2개가 되는 것이다.
<form style={formStyle}>
<form style={{border: "1px solid #ccc"}}>
React의 특징
-
Build encapsulated components
-
Component logic is written in JavaScript instead of templates
- 데이터를 빠르게 전송 가능
JavaScript = 객체기반
React = JavaScript Library
React = 객체기반
React Component를 보면 Json 형태라는 것을 확인 가능
// App.js
const App = () => ( // 함수형 프로그래밍(functional programming)
/*
return({key:value})
다음과 같이 key : value형태여야 하는데 key가 의미가 없기 때문에 생략
*/
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)
export defalut App
// jsx
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// 컴파일되기 전
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
Higher-Orderd Component
Build encapsulated components
Component logic is written in JavaScript instead of templates
- 데이터를 빠르게 전송 가능
JavaScript = 객체기반
React = JavaScript Library
React = 객체기반
React Component를 보면 Json 형태라는 것을 확인 가능
// App.js
const App = () => ( // 함수형 프로그래밍(functional programming)
/*
return({key:value})
다음과 같이 key : value형태여야 하는데 key가 의미가 없기 때문에 생략
*/
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)
export defalut App
// jsx
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// 컴파일되기 전
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
조금 더 이해하고 정리하기
Closer
로직을 리턴하면 클로저
inner에 있는 것
함수를 리턴fx -> fx
SPA(Single Page Application)
이전 내용을 쓸어내리고 새로 페이지를 올리는 것이다.
Route를 통해 페이지 변경이 가능하다.
Functional Programming
FP의 특징
- Pure Function : Valina Js
- First-Class Function : 1급객체
- 변수나 데이터 구조 안에 함수를 담을 수 있다(함수 안에 함수를 리턴)
- Immutable Data
- 명령형이(for, if) 아닌 선언적 방식으로 구현
FP 조건
- pure function
- High order 고차함수 = 부모함수
- lamda
EJB = 지향해야함
params = T
return = R
- 변수나 데이터 구조 안에 함수를 담을 수 있다(함수 안에 함수를 리턴)
- 명령형이(for, if) 아닌 선언적 방식으로 구현
EJB = 지향해야함
params = T
return = R
함수도 객체 = 함수가 props를 가진다.
함수에는 일반 객체(Json)와 달리 함수만의 표준 프로퍼티가 정의(default)되어있다
무상태 프로그래밍
- 상태가 변한다고 해서 속성이 변하지는 않음 => 속성을 const로 선언
- 상태는 객체 세계와 외부 세계간의 소통(i/o)을 위해서만 발생한다.
Author And Source
이 문제에 관하여([React] 상식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@s_keyyy/React-기본-gq0ggm0t저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)