TIL - REACT 복습 (1)

React 복습 및 기본기를 위해 코딩애플 강의를 수강하기 시작했다.
생각보다 되게 많은 사람이 듣고 있었음... 친구도 부트캠프 시작할 때인가 그 전에
들었다고 한다... 미리 알려줄껄 그랬다고 ㅎㅎㅎ 원래 유명한 강의인가 보다.
내가 코드에 대해 배우고 사용은 하는데 뭔가 응용하기는 어려운 것 같아, 원리와 기본기를
학습하고자 수강을 시작했다! 정리해가면서 복습해야지⭐️

1) react 특징

• className으로 명칭

• {} 데이터 바인딩

• style={ { 중괄호 } } 형식

• onClick={함수}

• array/object 특징 : array/object를 담은 변수엔 화살표만 저장됨.(어디에 있는지만 알려줌 reference data type)
  변수1, 변수2 화살표가 같으면 변수 1 === 변수 2를 비교해도 true 나옴.
  state가 array/object면 shallow copy를 만들어서 수정해야함.

  let [글제목, 글제목변경] = useState([
     "남자코트 추천",
     "강남우동맛집",
     "파이썬독학",
   ]);
  
  onClick={() => {
  //let copy = 글제목,
  //copy[0] = "여자코트 추천"
  //console.log(copy==글제목) => copy는 기존 state와 달라지지 않았다고 생각
  //...은 괄호를 멋겨서 다시 씌워달라는 의미 -> 화살표도 달라짐.
  const copy = [...글제목];
  copy[0] = "여자코트 추천";
  글제목변경(copy);

2) useState 특징

• state (변경 시 자동으로 html에 반영되게 만들고 싶을 때)

   let [a, b] = useState() a: 보관했던 자료, b: 변경을 도와주는 함수

• state 변경하는 법 : state 변경 함수 (새로운 state)

3) 컴포넌트 만드는 법

• function 만들고 이때 앞에는 대문자 (다른 함수 바깥에)
• return() 안에 html 담기
• <함수명> </함수명> 쓰기
• 어떤걸 컴포넌트로 만들면 좋은가 반복적인 Html 축약할 때, 큰페이지들, 자주 변경되는 것들

4) 동적인 UI 만드는 단계

• html, css 미리 디자인 완성
• UI의 현재 상태를 state로 저장
• state에 따라 UI가 어떻게 보일 지 작성

const [modal, setModal] = useState(false);

<div className="list">
<h4 onClick={() => {
setModal(!modal);//지금 state가 true면 setModal(false)
}}>
{글제목[2]}
</h4>
  <p>2월 17일 발행</p>
</div>
{modal == true ? <Modal /> : null}
 );
}
export default App;

function Modal() { //Modal 컴포넌트를 함수 바깥에 별도로 저장
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}
//modal 현재 값이 true면 Modal 컴포넌트를 열고 아니면 꺼라

5) map

• array 자료 갯수 만큼 함수안의 코드 실행해줌
• 함수안에 파라미터는 array 안에 있던 자료임

[1,2,3].map(function(a) {
console.log(a)
-> 1,2,3

• return에 뭐 적으면 array로 담아줌.

[1,2,3].map(function(a){
return '12121212'
-> [12121212,12121212,12121212]

• map이용하여 리스트 넣기

 let [글제목, 글제목변경] = useState([
    "남자코트 추천",
    "강남우동맛집",
    "파이썬독학",
  ]);
  let [따봉, 따봉변경] = useState([0, 0, 0]);
   {글제목.map(function (a, i) {
    return (
      <div className="list">
        <h4>{글제목[i]}
           <span onClick={() => {
                 const copy = [...따봉];// state가 array/object면 shallow copy를 만들어서 수정해야함.
                 copy[i] = copy[i] + 1;
                 따봉변경(copy);
                 // 따봉변경(따봉 + 1); 이게 기본 수식
                }}>👍
          </span>
            {따봉[i]}
        </h4>
          <p> 2월 17일 발행</p>
      </div>
        );
 })}

6. props

     {modal == true ? <Modal 글제목={글제목} /> : null}
   </div>
 );
}

export default App;

function Modal(props) {
 return (
   <div className="modal">
     <h4>{props.글제목[0]}</h4>
     <p>날짜</p>
     <p>상세내용</p>
   </div>
 );
}

만약 모달창 색상을 바꾸고 싶다면?
div에 style을 props로 넘겨줄 수 있음.

<div className="modal" style={{background: props.color}}>

이렇게 스타일을 두고 위에 모달 컴포넌트 쓰는 곳에 가서 컬러 추가해주면 됨

{modal == true ? <Modal color={'yellow'} 글제목={글제목} /> : null}

props 는 부모 자식 관계에서만 전달가능