3. 컴포넌트와 속성 : components and props

3.1. 리엑트 기본 컴포넌트 구성

// 1 : 함수형 컴포넌트 타입
function Header() {
    // 함수형 컴포넌트는 기본js와 달리 대문자로 시작한다 : ex) Header
  return <h1>Hello React</h1>;
}

// 화살표 함수 타입 또한 가능
const Header = () => <h1>Hello React</h1>;

// 2 : 클래스형 컴포넌트 타입
// 클래스형 컴포넌트가 더 많은 상용구(extends-상속 등)를 가지고 있으며, 기본적으로 render 메소드를 구현한다.
class Header extends React.Component {
    render() {
    return <h1>Hello React</h1>;
  }
}

3.2. 컴포넌트 사용방법

// jsx 함수 선언 
const Header = () => <h1>Hello React</h1>;

// 커스텀 jsx 사용 함수명을 태그 형태로 입력한다
ReactDOM.render(<Header />, document.getElementById(“root”));

// renders: <h1>Hello React</h1>

3.3. 컴포넌트 재활용 하기

// 예를들어 Header와 Footer 를 만들고 내용을 바꿔(Hero, About) 새롭게 IndexPage 와 AboutPage 컴포넌트를 만들어 사용할 수 있다.
// '/' 로 라우팅 예시
function IndexPage() {
  return (
    <Header />
    <Hero />
    <Footer />
); }

// '/about' 로 라우팅 예시
function AboutPage() {
  return (
    <Header />
    <About />
    <Footer />
); }

3.4. 컴포넌트에 속성(prop) 값 설정으로 데이터 전달하기

// 컴포넌트에 값을 전달하기 위해 prop 설정을 활용 합니다. 예시) Header 에 사용자명 설정 등
const username = “John”;

// Header 함수에 props 라는 속성 값을 추가 합니다.
// 그리고 아래와 같이 중괄호로 사용자 명을 입력 받습니다.
ReactDOM.render(
<Header username={username} />,
document.getElementById(“root”) );

// 입력받은 username 은 props object(개체) 를 통해 함수 내에서 사용할 수 있습니다.
// 또한 모든 컴포넌트에서 위와 같은 방식으로 사용 할 수 있습니다.
function Header(props) {
    return <h1>Hello {props.username}</h1>;
}

3.5. props 는 직접적으로 변경 불가 (readonly)

function Header(props) {
    // prop object 를 변형 할 수 없습니다. 읽기전용 속성
    props.username = “Doug”;
    return <h1>Hello {props.username}</h1>;
}

3.6. 하위 자식 개체에 prop 정보 전달하기

// children 속성은 매우 유용합니다.
// Layout 컴포넌트와 같이 다른 컴포넌트를 감쌀때(wrap) 매우 유용합니다.
// (감싸주는 스타일을 통일하게 지정할 수 있기 때문)
function Layout(props) {
    return <div className=”container”>{props.children}</div>; 
}

// Header, Hero, Footer 를 Layout 컴포넌트로 감싸 준다.
function IndexPage() {
  return (
    <Layout>
      <Header />
      <Hero />
      <Footer />
        </Layout> 
    );
}

// Header, Hero, Footer 를 Layout 컴포넌트로 감싸 준다.
function AboutPage() {
  return (
    <Layout>
            <About />
      <Footer />
    </Layout>
    ); 
}

3.7. 상태값에 따라 컴포넌트 표시하기

function Header() {
    const isAuthenticated = checkAuth();
      return (
        <nav>
            <Logo />
                // 인증된 경우에 <AuthLinks /> 아니라면 <Login /> 을 보여준다 
          {isAuthenticated ? <AuthLinks /> : <Login />}
                // 인증된 경우에 <Greeting /> 를 아니라면 아무것도 보여주지 않는다 
          {isAuthenticated && <Greeting />}
        </nav>
    ); 
}

3.8. 다양한 컴포넌트를 표시하기 위한 파편(프레그먼츠:Fragments)

<> ... </> 를 사용하여 다건의 컴포넌트를 표현한다

function Header() {
    const isAuthenticated = checkAuth(); return (
        <nav>
        {isAuthenticated ? (
            <>
            <AuthLinks />
            <Greeting />
            </>
        ) : <Login />}
        </nav> 
    );
}

---

React 2020 CheatSheet

이전 글 보기 | 다음 글 보기

01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 |