React - 컴포넌트(Component) , 화면 바인딩 (Screen binding)

컴포넌트(Component)

파일명 : B_Home2.js

 

컴포넌트는 크게 2가지로

Attibute,Method/ 화면에 구현될 곳 으로 나누어지는 것 같다

(아직까지는 그런듯...)

 

function B_Home2() {

 

Attirube , Method

 

return(

<div>

 

화면에 구현될 곳

 

</div>

)

}

 

 

---

바인딩 변수 선언

바인딩 변수 : 화면에서 수정이 일어났을 때 정상적으로 보이게 만들어주는 변수

let [변수명, 수정(setter)함수] = useState(초기값)

 

 

 

예제)

import {useState} from 'react' 

로 불러 와 주고

 

function B_Home2() {

 

Attirube , Method,연산영역

let [ element, setElement ] = useState("초기값") // element = 초기값 과 setElement = 수정(setter)함수

const myClick2 = () => { setElement("안녕") } // 클릭시 element => setElement 로 수정

 

return(

<div>

 

화면에 구현될 곳

{element}  // 바뀔곳

<button onClick={myClick2}>클릭</button>

 

</div>

)}

export default B_Home2

 

 

※ React 특징

최초 1번만 정상적으로 화면에 표시

수정 => 화면에 수정된 값이 보이지 않음

 

따라서 일반 변수는 수정된 화면에 나타나지 않는다!!!

일반 변수를 왠만해서 쓰지말자!