React - Base(1)

ReactJS는 JSX 사용

Base ReactJS

화살표 함수

	function Title() { return(...); } === Title = () => ();

Title함수를 태그처럼 불러온다

<Title/> 

=> Title 함수를 컴포넌트라 부른다.
※만드는 함수(컴포넌트)의 이름의 첫시작은 무조건 대문자

태그에 넣은 속성은 props

<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>		</h3>

h3의 props: id, onMouseEnter

전체 코드

const root = document.getElementById("root");
function Title() {
	//h3 태그를 반환하는 Title 함수
	return(
		<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
			Hello i'm a title
		</h3>
	);
}
/*const h3 = React.createElement("h3", {
	onMouseEnter: () => console.log("mouse enter")
	}, "Hello i'm a span");*/
    
const Button = () => (
	//button 태그를 반환하는 Button 함수
	<button 
		style={{ 
			backgroundColor: "tomato"
		}} onClick={() => console.log("clicked")}>
		Click me
	</button>
);
/*const btn= React.createElement("button", {
	style: { 
		backgroundColor: "tomato"
	},
	onClick: () => console.log("clicked")
}, "Click me");*/
const Container = () => (
	<div>
		<Title/> 
		<Button/>
	</div>
);

ReactDOM.render(<Container/>, root);
//root에 Container 포함시키기

status

const root = document.getElementById("root");
let counter = 0;
function countUp(){
    counter = counter + 1;
}
const Container = () => (
    <div>
        <h3>Total clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
    </div>
);
ReactDOM.render(<Container/>, root);

counter 변수를 직접 태그의 내용으로 넣고 Cotainer를 렌더링하면 counter는 초기값인 0을 가진 상태로 렌더링되기 때문에 버튼을 클릭해도 UI의 값은 바뀌지 않고 초기값으로 보여진다.
=> 클릭할 때마다 Container를 다시 렌더링하여 UI를 바꿔줘야한다.

개선된 나쁜 코드

const root = document.getElementById("root");
let counter = 0;
function countUp(){
    counter = counter + 1;
    render();
}
function render(){
    ReactDOM.render(<Container/>, root);
}
const Container = () => (
    <div>
        <h3>Total clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
    </div>
);
render();
    

ReactJS는 바뀌는 부분의 UI만 업데이트한다
(바닐라JS는 보든 요소를 다 업데이트)

개선된 좋은 코드

const root = document.getElementById("root");
function App() {
    const data = React.useState(0);
    const [ counter, setCounter ] = data;
    /*
        const counter = data[0];
        const modifier = data[1];
    */
    const onClick = () => {
        //setCounter(counter + 1);
        //setCounter함수에 어떤 값을 줘도 counter를 그 값으로 바꾸기 위해 리렌더링 일으킴
        setCounter((current) => current+1);
        //current는 현재의 counter의 값을 지칭
    };
    return(
        <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={onClick}>Click me</button>
        </div>
    );
}
ReactDOM.render(<App />, root);