TIL # 33 (React 기초 강의 리뷰)

React에서는 HTML 대신 JSX를 사용해야 한다. 🤐 App.js에서 작업한다.

1. 태그에 class를 주고 싶으면?

<div classNmae="클래스명">

2. 리액트에서 데이터 바인딩 쉽게하는 법 {변수명, 함수 등}

let posts = '강남 고기 맛집';

<h4> {posts} </h4>

3. 이미지 넣기

img src = { logo } />

4. JSX에서 style 속성 집어넣을 때 camelCase 사용하기

<div style= { { color : 'blue', fontSize  30px } }>개발 Blog</div>

5. 리액트의 데이터 저장공간 state 만들기 {useState}

[state데이터, state 데이터 변경 함수] 변수 대신 쓰는 데이터 저장공간이다. state는 변경이 될 때 html이 새로고침 없이도 자동으로 재렌더링 된다. 그냐 변수는 변경되어도 재렌더링이 안된다. 즉, html이 새로고침 없이도 스무스하게 변경되기 때문에 자주 바뀌는, 중요한 데이터는 변수 말고 state로 저장해서 쓰자.

let [글제목, 글제목변경] = useState('남자 코트 추천');

<h3> {글제목 } </h3>

문자, 숫자, array, object 다 저장 가능.

6. 좋아요 버튼 만들기

let [따봉, 따봉변경] = useState(0);
<h3> {글제목[0] } <span onClick={ ()=>{따봉변경(따봉+1)} }> 👍</span> {따봉} </h3>

7. 버튼을 누르면 첫째 제목이 '여자코트 추천'

수정된[데이터]를 만든다. 그리고 state의 복사본을 만들어서 수정하자. 그냥 복사하는 것이 아니라 state를 deep copy해서 수정하자. deep copy는 값공유를 하지 않는 서로 독립적인 값을 가지는 복사이다.

function 제목바꾸기(){
  var newArray = [...글제목];
  newArray[0] = '여자 코트 추천'
  글제목변경(newArray)
  //글제목에 있던 0번째 데이터를 여자코트 추천으로 바꿈
  
  <button onClick={ 제목바꾸기 }>버튼</button>
}

8. component로 HTML 깔끔하게 줄이기

component 이름은 대문자로, 대괄호로 만들기. return()안에 있는 건 태그 하나로 묶어야 한다. 반복출현하는 HTML 덩어리, 사이트에서 자주 변경되는HTML UI들, 다른 페이지를 만들 때 컴포넌트로 만드는게 좋다. 다만, state를 쓸 때 복잡해진다.

        <Modal></Modal>
      
    </div>
  );
}

function Modal(){
return(
  <div className="modal">
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
)

}