TIL 6주 1일차

리액트 부모, 자식 Component

 

import React from "react";

function Child() {

  return <div>연결 성공!</div>;

}

function Mother() {

  return <Child />;

}

function GrandFather() {

  return <Mother />;

}

function App() {

  return <GrandFather />;

}

export default App;

 

---

Props : 부모 Compoent로부터 받아온 데이터

function Mother() {

  const name = "홍부인";

  return <Child motherName={name} />;

}

function Child(props) {

  console.log(props);

  return <div>{props.motherName}</div>;

}

 

부모에서 자식 컴퍼넨트로만 프롭스를 전달할 수 있음

 

파라미터 이름을 꼭 props로만 할 필요는 없음

 

---

props.children 이용

import React from "react";

function User(props) {

  return <div>{props.children}</div>;

}

function App() {

  return <User>안녕하세요</User>;

}

export default App;

---

JSX 문법

리액트에서는 딱 하나의 html 파일만 존재

그럼 리액트에서 어떻게 뷰를 그릴까요?

JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.

-----------

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

-------

1. 태그는 꼭 닫아주기

2. 무조건 1개의 엘리먼트를 반환하기

3. JSX에서 javascript 값을 가져오려면 -> 중괄호를 쓴다 { }

4. class 대신 className

5. 인라인으로 style 주기

---

 

State

useState

//const [value, setValue] = useState(초기값)