5주차 - React

기간	230607 - 230609
배운 내용	React

 

◎ React

1. 리액트의 특징

어떤 태그를 쓰든 전체를 감싸는 태그(root)가 필요

그냥 <> </>도 가능

시작 태그와 종료 태그를 반드시 작성해야 한다
html에선 <br> 같은 거 가능했지만 무조건 <a> </a> 또는 <a/>로 사용해야 함(=xml의 특징)

class 말고 className이라고 써야 함

소괄호는 리턴 포함. 리턴으로 끝나면 대괄호 리턴
리턴 안 할 땐 소괄호 사용불가

 

2. 커스텀 태그(컴포넌트)

커스텀 태그 만들어줌
대문자로 시작하면 리액트의 컴포넌트
<Header></Header>  == <header> ~~~~ <header>

 

리액트 사용해서 커스텀 태그 만들어 쓰면 재사용 가능, 유지보수하기 좋음(여러 코드에 한 번에 변경사항 적용 가능)
리액트로 만든 페이지는 컴포넌트 단위로 이루어져 있다.

 

- 컴포넌트 생성

src/component/Hello.js 생성 후,

export default function Hello(){
    return (
        <div> <h1>Hello</h1> </div>
    )
}

 

App.js에서 아래와 같이 사용 가능

import './App.css';
import Hello  from './component/Hello';

function App() {
  return (
    <div className="App">
        <Hello/> 
    </div>
  );
}
export default App;

 

- 주의할 점

• 컴포넌트 이름은 반드시 대문자로 시작
• 컴포넌트에서 JSX 리턴 시에는 반드시 하나의 태그로 전체를 감싸서 리턴
  • OK return ( <div> <div></div> </div> )
  • 오류 return ( <div> </div><div> </div> )
• react에서 html 태그는 반드시 소문자로

 

3. State

- State 객체의 값이 변경되어도 화면 갱신이 안 되는 사례
obj = {id:1, name:"kim"}
obj.name = "lee"; < - 이렇게 변경 후
setObj(obj) 하면 obj.name은 그대로 kim

왜냐하면
객체는 주소 저장
주소가 가리키는 곳에서는 name이 변했지만 주소는 그대로
setObj 입장에서는 변한 것이 없으므로, 화면을 refresh 하지 않음
(주소가 저장한 것은 변했지만 주소가 변하지 않아서)

=> 변경하려면 객체를 새로 만들어야 함

import { useState } from "react" ; 

export default function Hello() {
   const [user, setUser] = useState({id:1,name:"kim"}) ;
   function test(){
      user.name="lee"; 
      setUser(user);// 화면 갱신 안됨
      
      // 아래와 같이 수정하면 화면이 갱신됨
      // let NewUser = {...user, name:"lee"};  // 새로운 객체 생성
      // setUser(NewUser); 

   }
   return (
      <button onClick={test}>{user.name} </button>
   )
}

 

---

 

5주차는 연휴로 인해 수업일수가 적고, react 수업은 대부분 실습이었기 때문에 포스팅할 내용이 별로 없습니다..