(1).이정환_react.js강의_ 컴포넌트

1. 부모 컴포넌트, 자식 컴포넌트

ex_

import Header from "./components/Header";

function App() {//부모 컴포넌트
  return (
    <>
      <Header /> //자식 컴포넌트
      <h1>안녕 리엑트!</h1>
    </>
  );
}

export default App;

2. React에서 App 컴포넌트 특징 :

App. 모든 자식 컴포넌트의 상위 컴포넌트 => 따라서, App 컴포넌트를 '조상'컴포넌트 || 'Root' 컴포넌트 라고 한다.

3. React 프로젝트의 일반적 초기 셋팅 컴포넌트 구조

App.js

import Footer from "./components/Footer";
import Header from "./components/Header";
import Main from "./components/Main";

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

export default App;

4. JSX 문법 :

- 정의 : 컴포넌트 return 안의 태그들 내의 {}를 이용하여, 변수 , 연산자 등을 렌더링할 수 있도록 하는 문법 :

- 예시 :

function Main() {
  const number = 10;

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

export default Main;

- ★JSX문법 주의사항 :

• 주의1 : {} 안에 if ,for , while 같은 조건문은 들어오지 못한다.

//즉 오직, javaScript 표현식만 사용할 수 있다.

• 주의2 : {} 안에 bool형 값, undefined, null 값은 렌더링 X ,단 오류나는 것은 아니다..

//배열은 렌더링 된다.

• 주의3 : {} 안에 객체는 고대로 렌더링이 아닌, 속성으로 따로 추출하여, 렌더링한다..
• 주의4 : return 안의 태그들은 모두 닫힌 태그 || 셀프 Closing 되어야 한다.(예 : <img/>)
• 주의5 : return 안의 태그의 구성에서 최상위 태그는 반드시 하나뿐이여야 한다.

오류나는 코드 예시 :

function Main() {
  const number = 10;

  return (
    <div></div>//최상위 1
    <main>//최상위2
      <h1>Main</h1>
      <h2>{number}</h2>
    </main>
  );
}

export default Main;

- JSX 문법 연습 코드 :

예시1 코드 : 삼항연산자를 이용한 렌더링

function Main() {
  const user = {
    name: "이정환",
    isLogIn: true,
  };

  return <>{user.isLogIn ? <div>로그인</div> : <div>로그아웃</div>}</>;
}

export default Main;

예시2 코드 : if문을 이용한 렌더링

function Main() {
  const user = {
    name: "이정환",
    isLogIn: true,
  };

  return <>{user.isLogIn ? <div>로그인</div> : <div>로그아웃</div>}</>;
}

export default Main;

5. 만약, 아래의 형태를 어떻게 컴포넌트로 작성할 것인지, 설계를 해봐라.

답 :

구조는 같지만, 세부적인 내용을 다르게 할 때, => props를 걸어서 값을 다르게 하여, 세부적 내용을 다룬다.

◎ 연습문제 :

App 컴포넌트에 Button 컴포넌트 3개를 달아서, 버튼 텍스트는 각각 '메일' , '카페' , '블로그' 로 설정하고, 각 버튼의 색깔을 red, green , blue로 설정해봐라.

답 :

App.js

import Button from "./components/Button";

function App() {
  return (
    <>
      <Button text={"메일"} color={"red"} />
      <Button text={"카페"} color={"green"} />
      <Button text={"블로그"} color={"pink"} />
    </>
  );
}

export default App;

Button.js : ★ Button 컴포넌트 매개인자 props로 입력 => props의 프로퍼티로 세부기능 적용

function Button(props) {//props
  return (
    <>
      <button style={{ color: props.color }}>{props.text}</button>
      //style 적용법 기억하자.
    </>
  );
}

export default Button;

출력결과 :

★6. 컴포넌트의 속성 중 default 설정하기 :

문법 :

function 컴포넌트 (props){

    const {속성1 ="default" , 속성2 ...} = props
}

예시 :

Button 컴포넌트 :

function Button(props) {
  const { color = "purple", text } = props;
  return (
    <>
      <button style={{ color }}>{text}</button>
    </>
  );
}

export default Button;

7. 컴포넌트의 자식 컴포넌트를 컴포넌트.js 매개인자의 children 객체로 받을 수 있다.

예시 코드 :

import Button from "./components/Button";

function App() {
  return (
    <>
      <Button text={"메일"} color={"red"} />
      <Button text={"카페"} color={"green"} />
      <Button text={"블로그"}>
        <div>시발아</div>//자식 태그
      </Button>
    </>
  );
}

export default App;

자식 태그가 출력이 되지 않은 것을 볼 수 있다.

Button 컴포넌트.js :

function Button(props) {
  const { color = "purple", text, children } = props;//props에 children 속성 추가
  return (
    <>
      <button style={{ color }}>
        {text}
        {children}//안에 출력에 추가
      </button>
    </>
  );
}

export default Button;

출력 결과 :

//전달 받은 것을 알 수 있다.

○ 핵심 요약 :