JSX, state, component

JSX

리액트를 사용 하는 이유 중 하나는 데이터 바인딩이 편하다는 점이다.

let divStyle = { color: 'blue', fontSize: '30px' }

return <div style={ divStyle }></div>

state (중요한 변수 관리)

리액트에서 데이터를 보관하는 옵션은 2가지가 있다.
1. 일반 변수에 저장
2. State 에 저장

state는
1. 변수대신 쓰는 데이터 저장 공간
2. useState() 를 이용해 만들어야 한다
3. 문자, 숫자 , array, object 다 저장이 가능하다

그러면 그냥 변수 쓰면 되지 왜 굳이 state를 만들지?

[state쓰는 이유]
⭐️ React를 웹앱처럼 동작하게 하려고!

• state가 변경될 때 데이터를 담고 있는 html이 자동으로 재렌더링 된다.
• 그냥 변수로 만들어 놓으면 재렌더링 안되고 새로고침 해주어야지 변경사항이 노출된다 (새로고침 없이 스무스하게 변경 시키기 위함)

  자주 바뀌는 중요한 데이터는 변수말고 state로 저장해서 쓸 것
  근데 안바뀌는 데이터는 state쓰면 안된다! 변경되는 데이터만 state에 넣을 것!!

const [like, setLike] = useState(false);

const handleLikeClick = () => {
  setLike(!like);
  updateLikeHit();
};

return(
  <div className="feed-image-wrapper" onDoubleClick={handleLikeClick}>
    <i className={`${likeInfo.class} ${likeInfo.animate}`} />
    <img src={feedImg} alt="피드이미지" />
  </div>
)

state쓸 때의 주의점
1. 원본 state는 직접 수정이 되지 않는다. (setLike(<바꿀내용>) 으로 변경해야한다)
=> state 직접 변경시 재 렌더링이 되지 않는다.
2. 변경함수 안에 들어가는 data type은 같은 자료형으로 맞추어 집어넣어줘야 한다.

어떤걸 Component로 만드는게 좋을까?

1. 반복출현하는 HTML 덩어리들
2. 자주 변경되는 HTML UI 들
3. 다른 페이지를 만들 때 (Router 사용을 위해)

Component 많이 만들면 단점

• state 쓸 때 복잡해짐 (props 전달 전달 그리고 state 끌어올리기 등등)