React란?
일반 자바스크립트 개발이 뼈대인 html을 만들고 자바스크립트를 덧붙이는 식이었다면 리액트는 자바스크립트로 쭉 만들고 html에 적용하는 거꾸로 구조를 가짐. 리액트와 리액트 돔을 임포트. 콘솔에서 리액트를 입력하면  정상적으로 임포트 된 것을 알 수 있다.리액트로 엘리먼트 생성 하기
const span = React.createElement("span");
리액트 돔 사용, 그 의미는 저 리액트 엘리먼트를 html로다가 렌더, 즉 배치한다는 뜻이다.
html로다가 작성 --
<div id="root"></div>그리고 돔 작성.
ReactDOM.render(span, root);
즉 리액트를 통해 만든 span을 html의 root에다가 배치한다는 얘기다.
리액트 엘리먼트에다가 id와 글을 추가하기.
const span = React.createElement(
"span",
{ id:"sexy-span"},
"안녕! 난 스폰이야!"
);
같은 방법으로 버튼 생성
const btn = React.createElement("button", null, "날 눌러!");
ReactDOM.render(btn, root);
두개의 요소를 동시에 랜더 하는 법, 랜더돔의 숫자를 늘리는게 아니라 요소들을 배열로 받는 새로운 요소 하나를 랜더하면 된다.
const container = React.createElement("div", null, [span,btn]);
ReactDOM.render(container, root);
결과는
리액트에서의 이벤트
본래 html에서는 이벤트를 쓰려면 addeventlistner를 써야 했지만 리액트는 간단하게 프로퍼티로 이벤트를 만들 수 있다.
--const btn = React.createElement(
"button",
{
onClick: () => console.log("눌름"),
},
"날 눌러!"
);
결과는
중요한점!
누구도 리액트에서 createelement같은 식으로 요소를 만들지는 않는다!(그러나 동시에 리액트에서 형성하는 기초이므로 중요하다)JSX
이러한 요소 생성을 대체하는 것이 바로 JSX이다. 자바스크립트를 확장한 문법. const h3 = React.createElement("h3",{
onMouseEnter: () => console.log("마우스 눌름"),
},"안녕! 난 버튼이야!");
요 문장을
const Title = (<h3 id="title" onMouseEnter={() =>
console.log("마우스 눌름")}>안녕! 나는 시작이야!);
이렇게 적는 것으로 줄여 쓸 수가 있다.
const btn = React.createElement(
"button",{
onClick: () => console.log("눌름"),
style: {
backgroundColor: "tomato",
}
},"날 눌러!"
);
요 문장 또한
const Button = (
<button style={{backgroundColor:"tomato",}}
onClick={() => console.log("나 눌렸어!")}
>
날 눌러.
</button>
); 일케 바꿀 수가 있다.
jSX를 쓰려면 변환기가 필요하다 바벨을 임포트 해주자.
<script type="text/babel">그러면 정상 작동 된다.
함수로 만들어주기.
const Title = (
이거를
const Title = () => (
요렇게 해주면 된다.
이러한 함수들을 랜더링하기
const Container = () => (
<Title /> <Button />
</div>);
ReactDOM.render(<Container />, root); 이런 식으로 컴포넌트를 쪼개서 개발시에 주의점.
무조건 대문자가 앞에 와야 한다.
Title이 아니라 title이라면 html의 코드로 인식해 버리고 만다.
결과는 
= () => () 가
function 함수() {}와 동일하다는 걸 기억하자.
State에 대해 알아보자
변수값을 jsx에게 주는 방법.
let counter = 0; 생성
클릭 횟수: 0
을 단지클릭 횟수: {counter}
로 바꿔주기만 하면 변수가 사용이 된다.그럼 함수를 적용하는 방법은??
함수 생성 -- function countUp(){ counter = counter + 1;}
그리고 버튼에다가 날 눌러! 라고 하기만 하면 함수가 적용된다! 엄청난 활용성!
리액트는 ui에서 바뀐 부분만 랜더해준다.
버튼 클릭시 랜더링은 전체를 랜더링 해주지만 html에서는 새 컴포넌트를 생성하는 게 아니라 숫자만 바뀌게 되는 것이다.
그러나 이런식의 렌더링은 잊어버리지 않게 주의 해야함.
그러니 스테이트를 활용하자.
지금의 방식:
counter가 0일때 초기 랜더링을 하고, 이후에 버튼이 눌려서 수가 오를 떄마다 리렌더링을 하는 방식.
이제 리액트에서 데이터를 저장하는 법을 알아보자.
데이터 생성.-- const data = React.useState();
데이터는 [정보값, 그걸 바꿀 수 있는 함수 값]을 가지게 된다.
이런 식으로 사용한다 --
클릭 횟수: {data[0]}
배열에 요소를 꺼내서 이름을 부여하는 간단한 방법 --
const icecream = ["choco","vanilla"]
const [초코,바닐라] = icecream;
초코 'choco'
바닐라 'vanilla'
이렇게 간단하게 처리가능.
리액트는 컴포넌트를 리렌더딩 하지 않아, 긴 코드가 되면 함수마다 렌더를 넣어줘야하는 복잡함이 생긴다. 그걸 막아주는 것이 스테이트다.
모디파이어 사용
const [counter, modifier] = React.useState(0);
스테이트의 두번쨰 인자가 모디파이어다.
모디파이어를 쓰면 값이 바뀌는 것과 동시에 렌더링도 다시 하는 두개의 작용을 한번에 한다.
보통 모디파이어 이름 작성법.
데이터 명, set데이터 명으로 쓴다.
const [counter, setCounter] = React.useState(0);
STATE [데이터, 모디파이어]
setCounter(counter+1);를 더 안전하게 바꾸기.
setCounter((current) => current+1);
이렇게 함수를 전달하는 식으로다가 현재 state값을 항상 준다.
INPUTS and STATE
시간단위를 바꾸는 변환기를 만들어 보자.막강한 변환기.
사용자가 입력하면 바꾸는 기능-- Change
