React
데이터를 State(내부상태) Props(외부로 부터 전달받은 상태)
나타내는 render가 있다.
상태가 변경될때마다 re-render 된다
실제로 변경된 부분만 화면에 업데이트 된다.
Componnent(컴포넌트)
컴포넌트는 JavaScript의 함수와 유사, react 요소들을 받아 반환 받는다
function App() {
const name = "teawook";
const list = ["우유", "딸기", "바나나"];
return (
<>
<h1 className="orange">{`hello ${name}`}</h1>
<ul>
{list.map(function (item) {
return <li>{item}</li>;
})}
</ul>
</>
);
}
export default App;
함수 컴포넌트
JSX
JSX는 페이스북에서 스펙을 정의한 XML과 비슷한 자바스크립ㅌ 확장 문법이다.
Props 와 State
Popps , State는 컴포넌트에 영향을 미치고 쓰임새가 다르다. 컴포넌트에서 자식 컴포넌트에게 값을 전달 할 때 쓰임
-Props
프로퍼티의 줄임말이고 리액트에서 사용자가 컴포넌트에 전달되어 보관하길 원하는 데이터.
-State
컴포넌트 내부에 존재 , 상태값 변경이 가능