[React] 컴포넌트, JSX, Props

목차

1. 리액트 컴포넌트

2. JSX

3. 리액트 단축키

4. Props

 

 

1. React Component란?

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고,

각 조각을 개별적으로 살펴볼 수 있습니다. (= 독립적이다)

개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.

"props"라고 하는 임의의 입력을 받은 후,

화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.

 

* 컴포넌트 이름은 무조건 대문자로 시작해야 한다.

* 폴더는 소문자로 시작하는 카멜케이스로 작성.

 

props = input

React Element = output

 

함수형 컴포넌트

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

매개변수에 input

return에 output

공식 문서에서도 함수형 컴포넌트 사용 권장.

 

클래스형 컴포넌트 (사용 X => 왜?)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

부모 자식 컴포넌트

반복되는 로직이 생길 경우에 코드를 따로 분리해서

컴포넌트로 나눠주는 작업이 필요하다.

 

 

 

---

2. JSX

JSX란?

(Javascript + XML - HTML) : 쟉스라고도 부름

 

JavaScript를 확장한 문법

HTML을 품은 JS => JSX!

 

 

* 자바스크립트 코드는 {}를 사용하여 코드 작성!

import logo from './logo.svg';
import './App.css';

function test () {
	console.log('test')
}


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
          {test()} // ----> 이렇게 사용 가능!!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

* JSX문법 안에 태그의 스타일을 부여하기 위해서는

객체 {키 : 밸류} 를 넣어주면 된다.

    <div
      style={{
        height: '100vh',
        display: ' flex', 
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >

 

* style 코드를 변수에 저장하여 사용 가능

// 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트니까요!
// 이렇게 쓰거나,
<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>
  );
}

 

---

3. React 단축키

 

VScode 확장 (Ctrl + Shift + X) 에서

ES7 + React/Redux/React Native/JS snippets 다운로드 받았다.

 

rfce = function 키워드가 들어감

 

rfc = export default가 같이 들어간 function이 들어감

 

 

---

4. Props

Props란?

컴포넌트 간의 정보교환 방식

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터이다.

 

특징

1. 위에서 아래 방향으로 흐른다.

2. 읽기 전용으로 취급되며, 변경하지 않는다.

 

porps 사용방법

function Mother() {
	const name = '홍부인';
  return <Child motherName={name} />; // 💡"props로 name을 전달했다."
}

function Child(props){
	console.log(props) // 이게 바로 props다.
	return <div>연결 성공</div>
}

 

prop drilling

부모 => 자식 => 그 자식 => 그 자식의 자식

이렇게 연쇄적으로 데이터를 물고 내려가는 현상을 prop drilling이라고 합니다.

위 현상을 해결하기 위해 'children' 이라는 방법을 사용합니다.

 

User 라는 컴포넌트 태그를 사이에 두고

전달하려는 데이터를 넣어주면

Children 이라는 Object 이름으로 데이터가 내려오게 됩니다.

 

주 용도는 활용성을 넓히는 데 사용되는데,

A 파일에서 prop.children을 코드에 적어주고,

다른 파일들에서 A 파일의 컴포넌트 태그 안에 데이터를 넣어주게 된다면

A 파일에 작성된 템플릿을 그대로 가져올 수 있게 되는 것이다.

 

import React from "react";

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}
export default App;

 

* props는 구조분해할당으로 어떤 porps가 있는지 구분해서 매개변수로 내려주는게 가독성에 좋다.

다만, 이렇게 했을 때 부모 컴포넌트에서 값이 내려오지 않을 경우 undefined가 나오는 경우가 있는데,

그럴 때 기본 값을 설정하는 코드가 있다.

// components/Child.js

import React from 'react';

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

// 이렇게 설정합니다.
Child.defaultProps={
	name: '기본 이름'
}

export default Child