컴포넌트 간단 정리

 

✅  컴포넌트 = "레고 블록"

컴포넌트는 화면을 구성하는 '조각'이다.
블럭처럼 조립해서 화면을 만든다.

 

 

 

 

 

---

 

• 컴포넌트를 통해 개별적인(=독립적인) 여러 UI조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 
• 컴포넌트는 JS의 함수(input-output)와 유사함.
• props(input)라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React(output)를 반환함

 

 

---

부모 자식 관계 컴포넌트 

다른 컴포는터의 return문 안에 포함될 경우 자식 컴포넌트이다. 

https://squirmm.tistory.com/entry/React-다른-컴포넌트에-정보-전달

https://velog.io/@liabin124/React-입문부모-자식-컴포넌트-JSX-Props

 

---

 

 

App 컴포넌트 = 루트 컴포넌트 = 모든 컴포넌트들의 조상  (관례랑 App 컴포넌트를 루트 컴포넌트로 활용 )

 

 

 

---

컴포넌트 다른 컴포넌트에서 사용하기

const Main = () =>{
    const number =10;
    return (
        <main>
            <h1>main</h1>
            <h2>{number}</h2>
        </main>
    );
}

export default Main;

import './App.css'
import Header from "./components/Header.jsx"
import Main from "./components/Main.jsx";
import Footer from "./components/Footer.jsx";

function App() {
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  );
};

export default App

보면 Main.jsx를 가져와서 App.jsx에서 사용하는 예시다.

 

참고로 jsx확장자는 Import할때 제외해도 잘 동색한다.

1.export default와 2.import 그리고 3.<Main / > 이 세가지를 확인하고 넘어가자.

 

 

 

---

이벤트 발생시키기

onClick onMouseEnter 이벤트를 등록했다

속성에 직접 입력하거나 아니면 컴포넌트 내부에 입력해서 아래 사진과 같이 전달하면 된다. 이때 ()이게 안 붙는 점을 주의하자

 

 

 

 

 

---

 

합성 이벤트 객체 = SyntheticBaseEvent

모든 브라우저의 이벤트 객체를 하나의 포맷으로 통일함.

아래 사진은 e로 이벤트를 받아서 단순히 출력한 예제다.

 

 

 

 

 

---

 

입력폼 만들기

입력 폼을 useState를 통해서 만들어보자

const [name,setName] = useState("이름"); 이 한줄의 의미는 뭘까

useState의 기본값 = 이름

useState의 값을 변경하는 함수의 이름은 setName

 

 

import {useState} from 'react';
//간단한 회원가입 폼 
//1.이름
//2.생년월일
//3.국적
//4.자기소개 
const Register=()=>{

    const [input,setInput] = useState({
        name:"",
        birth:"",
        country:"",
        bio:""
    });

    const onChange = (e) =>{
        setInput({
            ...input,
            [e.target.name] : e.target.value
        });
    }

    return (
        <div>
            <div>
                <input 
                name="name"
                value={input.name} 
                onChange={onChange}
                placeholder={"이름"}
                />
            </div>
            <div>
                <input 
                name="birth"
                    value={input.birth} 
                    onChange={onChange} 
                    type="date"
                />
            </div>
            <div>
                <select name="country" value={input.country} onChange={onChange}>
                    <optioin value=""></optioin>
                    <option value="kr">한국</option>
                    <option value="us">미국</option>
                    <option value="uk">영국</option>
                </select>
            </div>
            <div>
                <textarea name="bio" value={input.bio} onChange={onChange}/>
            </div>
        </div>
    );
};

export default Register;

 

 

 

 

 

---

리액트 컴포넌트 생명주기

 

Mount : 탄생 = 컴포넌트가 처음 화면에 나타날 때 

 

update : 리렌더링(다시 화면에 렌더링 ) = state나 props가 바뀌어 다시 그려질 때

 

unMount : 죽음 = 컴포넌트가 화면에서 사라질 때

 

 

마운트 시 한 번 실행	useEffect(() => { ... }, [])
특정 값 변경 시 실행	useEffect(() => { ... }, [value])
언마운트 시 정리작업	useEffect(() => { return () => {...} }, [])