Lieto: React 기초잡기 🧗

컴포넌트의 재사용을 유의미하게 해주는 Props 🎯

React는 컴포넌트별로(더 편하게)함수를 짤 수 있기 때문에 컴포넌트의 재사용에 유리하다.
그런데 안의 데이터 값이 달라지면서 컴포넌트가 재사용 되었을 때 유의미 하지 않겠는가?

즉, 입력 데이터가 다른 각각의 컴포넌트를 개발할 수 있다.

각각의 컴포넌트에 시리즈 이미지, 제목, 출간연도
이렇게만 데이터 값이 바뀌어서 컴포넌트가 재사용되어있는 모습을 볼 수 있다.

이게 가능하게 해주는게 바로 Props!

Props는 컴포넌트를 반환하는 함수가 사용될 때 프로퍼티로 사용된다.

export function TapButton() {
  return (
    <li>
      <button onClick={}>{}</button>
    </li>
  );
}

// App.js

 <TapButton onSelect={() => handleSelect("jsx")}>JSX</TapButton>

자 위 코드에서 Props는 무엇을까?

바로 Property 형식으로 들어간 onSelect, JSX이다!!

즉, 틀을 먼저 만들어 놓고 해당 값을 프로퍼티 (Props)를 통해 전달이 가능하다. 동적인 프로그래밍이 가능하게 해준다.

그럼 이렇게 사용이 가능하다.

export function TapButton(props) {
  return (
    <li>
      <button onClick={props.onSelect}>{props.children}</button>
    </li>
  );
}

props라는 객체에 해당 데이터들이 담겨져온다 ㅎㅎ

근데 props.children이라는 프로퍼티는 넣어준적이 없는데 왜 들어가있?

이미 정해진 답정너 props.children 🎯

props를 이떤 이름으로 설정할지는 개발자 마음이다. ㅎㅎ 그런데 이미 정해진 녀석이 있다.

예시를 보면

//React.jsx에서 일부 
 <TapButton onSelect={() => handleSelect("jsx")}>나야나</TapButton>

에서 나야나 부분을 보면 커스텀컴포넌트인데 <></>사이에 값이 들어가있다.

여기에 들어간 값은 자동으로 props.children의 값으로 들어가게된다.

컴포넌트가 동적으로 렌더링 되게 도와주는 State 🎯

State는 React에서 아주 중요한 또 유용한 역할을 담당한다.
useState라는 Hook이 관리하는 변수인 State에 대해 알아보자!

state는 useState라는 React Hook을 통해 사용이 가능하다.

state는 컴포넌트 함수를 재실행시켜줄 수 있다.

//App.jsx
const [value,setValue]=useState("초기값")

다음과 같이 사용하고 value에는 초기값이 setValue는 함수로서 value를 변경할 수 있는 함수이다.

주의사항❌

1. value에 직접 접근하여 값을 변경해서는 안된다
2. useState는 컴포넌트함수의 최상단에 위치해야한다!

일반변수 vs state 🎯

일반변수를 값이 변경하고 이 값을 동적으로 컴포넌트에 넣어준다면 ? 어떻게 될까

let value = "init";


return <div>
  <h1>{value}</h1>
<button onClick={()=>{value="changed"}}></button>
  </div>

이때 button을 누르면 value의 값이 변경되어 "changed"가 찍히게 될까?

그렇지 않다!

일반변수는 값이 update되어도 UI가 Update되지 않는다.

그럼 state는 ??

state의 경우 값이 변하게 되면 useState Hook이 컴포넌트함수를 재검토하여 다른 부분을 새롭게 렌더링해준다.

const [value,setValue]=useState("init")

return <div>
  <h1>{value}</h1>
<button onClick={()=>setValue("changed")}></button>
  </div>

이렇게하면 해당 value는 "changed"로 찍히게 된다!

그런데 React로 개발하다보면 이런 상황을 많이 마주한다.

setValue했는데 왜 value가 변하지 않았지?(사실변함ㅋㅋ) 🎯

위 예제를 그대로 가져다 쓰면 다음과 같은 상황을 말한다.

const [value,setValue]=useState("init")
const change =()=>{
 setValue("changed")
  console.log(value)
}
return <div>
  <h1>{value}</h1>
<button onClick={change}></button>
  </div>

자 이런 경우에 console.log(value)의 결과값은 어떤 값을 print하게될까?

changed를 예상하지만 사실 init이 찍힌다.

이러한 이유는 리액트의 내부원리를 알아야한다.

React는 State가 변경되는 setValue와 같은함수를 통해 해당 값이 변경될거같으면
이미 스케줄링을한다. "나 렌더링할 때 값 바꿀꺼야"
그리고 return에서 컴포넌트들을 그릴 때 그때 해당 값이 변경된다.

그렇기 때문에 setValue(비동기)를 마주했을때 값이 변하는게 아니라
렌더링할 때 값이 변하게 된다.

그래서 아직 console.log()를 찍을 땐 값이 변경된 것이 아니다.

그럼 만약 이런 상황도 있을 수 있다.

나는 setValue하고 변경된 그 값을 바로 사용하고싶은데..
이런 상황을 위해 useEffect Hook을 사용하면 된다.

useEffect 🎯

useEffect는 컴포넌트가 새롭게 리턴될때마다 작동한다. 즉, 리렌더링이 될때 작동하는 녀석이다.

이런 모습으로 많이 사용한다.

useEffect(어떤함수, [])

저기 위 []는 Deps라고하고 dependency array의 약자이다.

의존성 배열로서 위 값이 변경되면? UseEffect를 작동하겠다~~~ 라는거다.

만약 그 배열이 꺼져있다면? 최초의 1회만 작동을 하게 되는거다 (더 변하는게 없으니까!)

그래서 만약 변경된 값을 이어서 사용하고 싶다면 다음과 같이 사용하면된다.

const [value,setValue]=useState("init")
const change =()=>{
 setValue("changed")
}
useEffect(()=>{
  console.log(value)
},[value])

return <div>
  <h1>{value}</h1>
<button onClick={change}></button>
  </div>

위 같이 사용하면 value에 대한 다음 과정을 처리할 수 있게 된다!!