12. React 열심히 달리는 중 [리액트 입문 강의 JSX문법 to Props part2]

주말을 너무 쉬어버려서 정신차리고자 오늘의 목표는 리액트 강의 16강까지 모두 완강하는 것이다. 

이번 주차동안 오전은 자바스크립트 언어공부, 그리고 오후1시 부터 6시까지는 온전히 리액트에만 집중할 계획이다. 6시부터 10시까진 알고리즘도 풀고, 리액트 공부한 내용 정리도 하고..

자꾸 집중력이 깨지는데 잡생각이 많아져서인 것 같아서 얼마 전에 원인을 제거했다

이제 점차 집중력이 돌아오겠지 🥲.. 나는 ENTP니까 

리액트 심볼 간지난다

Props part3시작하다가 이거 먼저 정리 안하면 안될 것 같아서 하는 정리..

 

JSX문법

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

-리액트에서 뷰를 그릴 땐, JSX문법을 사용해서 react요소를 만들고 DOM에 렌더링시킨다.

-자바스크립트 안에서 html태그같은 마크업을 넣어 UI 뷰작업을 편하게 할 수 있다.

// import [패키지명] from [경로] 이 형식으로 불러와요.
import React from 'react'; 
// js 파일 뿐 아니라 이미지도 가능가능!
import logo from './logo.svg';
// css? 가능!
import './App.css';

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.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

스파르타코딩클럽은 자료가 잘 만들어져있어서 좋다

 

 

1. 태그는 꼭 닫아야한다.

input태그 > 전에 /로 닫아줘야 함. 

function App() {
  return (
    <div className="App">
      <input type='text'>
    </div>
  );
}

인풋 부분을 <input type='text'/>로 닫아줘야함

안닫힌 채로 돌리면 fail to compile

 

2. 한개의 element만 반환할 수 있다.

컴포넌트에서 반환할 수 있는 엘리먼트는 1개.

return (
    <p>안녕하세요! 리액트 반입니다 :)</p>

    <div className="App">
      <input type='text'/>
    </div>
  );

리턴부분에 P태그도 있고, div태그도 따로 있어서 fail to compile 이 뜬다.

div 내에 p태그를 넣어줘야 함

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

이렇게.

 

3. 자바스크립트값을 가져오려면 {중괄호}를 써야 한다. (값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있다.)——중괄호없으면 단순문자열로 인식.

 

좋은 예   

const cat_name = "perl";

  return <div>hello {cat_name}!</div>;

나쁜 예

 const cat_name = "perl";

  return <div>hello cat_name!</div>;

cat_name에 중괄호가 없어 단순 문자열로 인식됨.

 

 

<p>
        {number > 10 ? number + "은 10보다 크다" : number + "은 10보다 작다"}

      </p>

JS처럼 이렇게도 쓸 수 있다. 

 

4. HTML에서 쓰던 class대신 className을 사용.

<div class="땡땡땡"> 이 아닌...

<div className="App"> 

이렇게

id는 그냥 쓴다고 한다

ㅋㅋㅋ

 

 

5. HTML태그 내에 스타일을 직접 넣을 수 없다.

html에서는 

<p style="color: orange; font-size: 20px;">orange</p>

이렇게 p태그 내에 바로 style을 넣었었지..

 

하지만 JSX에서의 차이점은 css 문법 대신 json 형식으로 넣어주면 끝! 이라고한다..

style이라는 속성 안에 Json형식으로 넣어주기. 

<p style={{ color: "orange", fontSize: "20px" }}>orange</p>;

중괄호가 두개인 이유는, color~부터의 딕셔너리 또한 JS니까.

 

혹은

function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

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

이렇게 변수를 선언해서 넣는 방법, ,,

 

 

 

 

Props

props가 컴포넌트간 정보를 교류할 수 있게 해줌

부모 component로부터 가져온 데이터

function Mother() {

  const name = '홍부인'; 

  return <Child motherName={name}/>;
  }

Child라는 컴포넌트 옆에 motherName 을 넣는다.

 

function Child(props){
	console.log(props)
	return <div>연결 성공</div>
}

Child()에도 props를 넣으면 데이터 전달 완료.

 

이렇듯 props는 component간 정보를 교류할 때 사용된다.

부모컴포넌트가 자식에게 넘겨준 데이터들의 묶음이다. (단, 부모->자식 방향만 가능)

 

그럼 이제 Mother로부터 전달받은 motherName을 화면에 렌더링하려면,

function Child(props) { 

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

}

div내에 중괄호를 이용해 {props.motherName}을 넣었다. 

 

object literal의 key가 motherName 인 이유는 Child로 보내줄 때 motherName={name} 으로 보내주었기 때문

(object literal 란 {key: “value”} 데이터 형태)

 

 

import React, { Children } from "react";


function App() {
  return <GrandFather />;
}

function GrandFather() {
  const name = "할아버지";
  return <Mother grandFatherName={name} />;
}

function Mother(props) {
  return <Child grandFatherName={props.grandFatherName} />;
}
 
function Child(props) {
  return <div> {props.grandFatherName}</div>;
}

export default App;

GrandFather컴포넌트에서 정의된 이름을 Mother컴포넌트로, 그리고 Child컴포넌트로 props를 통해 전달 전달.

 

props대신 다른 변수 이름을 넣어도 됨

function Mother(aaa) {

  return <Child grandFatherName={aaa.grandFatherName} />;

}

function Child(aaa) {

  return <div> {aaa.grandFatherName}</div>;

}

 

Children

<component props={props}/> 와 다른 방식으로 자식 컴포넌트로 정보를 전달할 때 사용할 수 있는 props

 

import React from "react";

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

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

children props를 보내는 방식은 조금 다름.

기존 props  <user hello='안녕하세요'>

children props  <user>안녕하세요</user> 

정보를 전달받는 방법은 동일.

User컴포넌트에서 props.children을 받아 그대로 렌더링.

 

children 의 용도는, Layout component만들 때 자주쓰인다.

Layout 컴포넌트 안에 header컴포넌트가 있고, header아래에 {props.children}를 통해 props를 받아 렌더링.

즉, Layout컴포넌트가 쓰여지는 모든 곳에서 <Layout>...</Layout> 내의 정보를 받아서 그대로가져올 수 있다.

import React from "react";
import Layout from "./components/Layout";

function App() {
  return (

    <Layout> 
      <div>여긴 App의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default App;

전부 같은 스타일을 주고싶을 때.

Layout이라는 component툴을 만들고 그 안에 들어오는 값들은 전부 같은 스타일로

->component마다 스타일을 줄 필요 없이 layout component만 하나 작성해두고 그 안에 children으로 값을 주입하면됨!