state 예제를 통해 연습하기(2)

구현하는 기능과 배우는 컨셉

✔ state 다루는 방법
✔ immutable data
✔ component를 통해 html 관리

State 변경

◾ 제목바꾸기 함수에서 state를 변경하기위해 글제목[0] = '여자코트 추천'라고 작성하는것은 올바르지 않다.
◾ state는 = 등호기호로 직접 조작할 수 없다
◾ 만들어놓은 state 변경함수를 꼭 사용하자
◾ 글제목 state만들 때 같이 만든 글제목변경 함수를 사용하자
◾ 글제목함수에 array를 넣는이유는 state변경함수들은 state를 아예 대체만 할 수있다. 그래서 기존 state를 바꿔치기할 새로운 array를 넣어줘야한다.

1. 수정하고 싶은 state의 deep/shallow 카피본을 하나 생성한다.
2. 카피본을 입맛에 맞게 수정한다.
3. 카피본을 state변경함수()에 넣어 수정한다.
4. immutable data (직접 데이터를 수정하면안된다.)

클릭하면 동작하는 모달창

◾ 조건이 참일때만 을 보여주고 싶다면 리액트 중괄호 내에서는 if문을 사용할 수 없어서 삼항연산자를 사용한다 ◾ 리액트에서 텅빈 HTML을 의미하는 코드는 null이라는 자료형이다 ◾ UI가 보이는/보이지 않는 상태정보를 state로 만들어둠 (보통 true/false 자료형으로) ◾ state가 true일때만 UI를 보여주는 조건을 만듬 ◾ true가 되었을때 다시 false가 되어 다시누르면 닫히도록 설정

Component

◾ Component 이름 지을땐 영어대문자로 보통 시작한다.
◾ return () 안엔 태그들이 평행하게 여러개 들어갈 수 없다. ex) <div><div> <div><div>
◾ function을 이용해서 함수를 하나 만든다.
◾ 함수 안에 return()안에 원하는 HTML을 담는다.
◾ 원하는 곳에서 <Modal / > 이라고 사용했을때 함수안에 있는 HTML이 나타난다.
◾ 이렇게 축약한 HTML 덩어리를 Component라고 칭한다.
◾ 컴퍼넌트 안에 미리 만들어둔 component를 집어 넣기도 가능하다.
◾ 앞서 만든 Modal 컴포넌트의 <div>안에 다른 컴포넌트를 만들어서 집어넣을수있다.

function Modal(){
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <다른컴포넌트></다른컴포넌트>
    </div>
  )
}
function 다른컴포넌트(){
  return ( <div> 안녕하세요 </div> )
}

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

◾ 사이트에 반복해서 출현하는 HTML 덩어리들
◾ 내용이 자주 변경 될것같은 HTML 부분을 잘라서 만들면 좋다
◾ 다른페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 컴포넌트로 만드는게 좋다.
◾ 다른 팀원과 협업할 때 웹페이지를 컴포넌트 단위로 나눠서 작업을 분배하기도 한다.