React -State,Props,Jsx(Feat.NomadCoder)

Jsx

쓰는이유 : 조금 더 사용하기 편하고 직관적이다

JSX는 자바스크립트의 확장 문법이다.
리액트에서는 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타냄

UI를 나타낼 때 자바스크립트(logic)와 HTML구조(markup)을 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현 가능

기존 ReactJs로 Element생성하는 코드

const h3 = React.createElement("h3", {
},  "Hard React Test"); 

JSX로 바꾸기

const H3 = () => (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
            JSX TEST
        </h3>
);

브라우저가 JSX를 이해하기 위해서는 우리가 babel을 설치해서 한번 변환해줘야 한다.

컴포넌트로 사용할려면 무조건 대문자로 시작해야한다.
소문자로 시작한다면, 컴포넌트가 아닌 Html태그로 인식할 것이다.

---

State

: 데이터가 저장되는 곳

state를 사용하기 전

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

state를 사용해서 처리

useState을 사용하면 ReactDOM.render()을 계속 번거롭게 해주지 않아도 된다.

const root = document.querySelector("#root");
function App(){
	const [counter, setCounter] = React.useState(0);
	const onClick = () =>{
		setCounter(counter + 1);
	}
	return (
		<div>
			<h3>Total Clicks: 0</h3>
			<button onClick={onClick}>Click me</button>
		</div>		
	);
}
ReactDOM.render(<Container />, root);

useState설명
let [counter, modifier] = React.useState(0);
counter에는0이 :: 우리가 담으려고 하는 data값
modifier에는 함수가 저장된다. :: 위의 data값을 바꿀때 사용할 함수(리렌더링도 시켜준다.)
이 함수가 사용될때 컴포넌트가 재생성된다.

ex.
const test = [1, 2, 3]
const [a,b,c] = test
a = 1, b=2, c=3 이렇게 나온다.

let [counter, modifier] = React.useState(0);

1번째 요소는 우리가 담는 값
2번째 요소는 1번째 요소를 바꾸는 함수
이 때 0은 초기값을 나타낸다.

State.ex

const onClick = () => {
  setCounter((current) => current+1);
  // 이 함수의 1번째 argument는 현재 값
}

시간 변환기

function App() {
        const [min, changeMin] = React.useState(0);
        const onChange = (event) => {
            changeMin(event.target.value);
        };
        const reset=()=>changeMin(0);
        return (
            <div>
                <h3>AllInOne_Converter</h3>
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input value={min} id="minutes" placeholder="Minutes" type="number" onChange={onChange} />
                </div>
                <div>
                    <label htmlFor="hours">Hours</label>
                    <input value={Math.round(min/60)} id="hours" placeholder="Hours" type="number" />
                </div>
                <button onClick={reset}>Reset버튼</button>
            </div>
        );
}
const root = document.querySelector("#root");
ReactDOM.render(<App />, root);

---

Props

: 일종의 방식 - 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 속성(방법)
자식 컴포넌트는 전달받은 prop을 직접 변경 불가능
부모 컴포넌트에서 변경하여 새로운 prop으로 전달해야한다.

Props를 활용하지 않은 경우

function ConfirmBtn(){
	return(
      <button
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
	 }}>
  		Save Changes
	</button>
  );
}
function App(){
  return(
    <ConfirmBtn />
    <SearchBtn />
  )
}

Props을 활용한 경우

function Btn({ someText, test ){
  return (
	<button
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
          fontSize: test ? 15 : 10,
    }}>
      {someText}
    </button>
  );
}

function App(){
  return(
    <div>
      <Btn someText="Save Changes" test={true}/>
    </div>
  )
}

ex.
부모 컴포넌트

import Child from './Child';

const Parent = () => {
  const msg = "Hi From Parent";
  
  return(
    <div>
      <Child message={msg}/>
    </div>
    );
}

자식 컴포넌트

const ChildComponent = (props) => {
  // 전달받은 prop 사용
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
};

:propTypes라는 부분도 있는데, 나 같은 경우에 TypeScript을 사용하여 쓰지 않는다.
Prop Types 사이트
https://reactjs.org/docs/typechecking-with-proptypes.html
:: 다음과 같이 주로 사용한다.

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  onClick: PropTypes.func.isRequired,
};

---

useEffect

[ ]의 조건에 따라서 함수를 실행시킨다고 생각하면 이해가 쉬울 것 같다.

const [counter. setCounter]=useState("");
const [keyword, setKeyword]=useState("");

useEffect(()=>console.log("카운터"),[counter])
useEffect(()=> console.log("키워드"),[keyword])
/* 
: keyword가 변경되면 실행한다.
보통 keyword 부분은 state로 많이 사용한다.
*/
// 두 가지도 가능
useEffect(()=>console.log("카운터+키워드"),[counter, keyword])

useEffect(() => console.log("한번실행"),[])
// : 뒤에 [] 비어있기 때문에 한번만 실행한다.

CleanUp Function : 많이 사용되지는 않는다.
의존성이 없는 경우
1. 컴포넌트가 unmount(사라지는)경우에 return문이 동작

  useEffect(() => {
    if(keyword !== "" && keyword.length>5){
      console.log("Search For CleanUpTest", keyword);
    }
    return () => console.log("Clean Up Test-2");
  },[]);

의존성이 있는 경우
1. return 문이 먼저 실행
2. if안에 조건문이 실행

  useEffect(() => {
    if(keyword !== "" && keyword.length>5){
      console.log("Search For CleanUpTest", keyword);
    }
    return () => console.log("Clean Up Test-2");
  },[keyword]);