props.children

// src/App.js

import React from "react";

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

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

children 값 받아서 렌더링하기

import React from "react";

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

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

children의 용도

Layout 컴포넌트를 만들 때 자주 사용

Layout 컴포넌트 안에는 header 라는 컴포넌트가 있고, header 아래에 {props.children} 를 통해서 props를 받아 렌더링 하고 있습니다. 즉, Layout 컴포넌트가 쓰여지는 모든 곳에서 <Layout>…</Layout> 안에 있는 정보를 받아서 가져올 수 있는 것이죠.

// src/About.js

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

function App() {
  return (

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

// src/About.js

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

function About() {
  return (
    <Layout> 
      <div>여긴 About의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default About;

default props 지정하기

// components/Child.js

import React from 'react';

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

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

export default Child

개발자 도구에서

import React, { useState } from "react";

const App = () => {
  const [mule, setMule] = useState("내가 먼저 등장");
  const [pw, setPw] = useState("")
// [변수명, 값을 담아주는 set] = (첫번쨰 띄워줄 거)
  console.log("변수명 mule", mule)
  console.log("변수명 pw", pw)
  console.log("-------------")

  // Add 함수 
  // id 필드가 변경될 경우
  // 이벤트를 담아서 인풋에 뭔 써도 값이 되기
  const onIdChange = (event) => {
    setMule(event.target.value)
    // 꼭 기억** 이벤트 객체안에 타겟 객체안에  벨류의 값을 담는다.
    console.log("mule 바구니함수", mule)
  }

  // 비밀번호 필드가 변경될 경우
  const onPwChange = (event) => {
    setPw(event.target.value)
    console.log("pw 담아서 함수", pw)
  }

  return ( 
    <div>
      <div>
        ID : <input type="text" value={mule} onChange={onIdChange}/>
      </div>
      <div>
        PW : 
        <input type="password" value={pw} onChange={onPwChange}/>
      </div>
      <button onClick={()=> {
        alert(`입력한 아이디는 ${mule}이고, 비번은 ${pw}입니다.`)
        setMule("");
        setPw("");
      }}>
        Login</button>
    </div>
  )}; 
export default App; 

리액트 기능구현 및 코드분석

오늘은 프룹스랑 State를 문법을 배우고 구현해보면서 해석 해보았다.
돌아가는 원리를 더 파악해 보고 코딩을 많이 찍어 봐야겠다.

렌더링에 대해서도 많이 언급되고 있기에 구글링 해봤는데,
한마디로

코드로 정의된 내용이 실제 브라우저 화면에 그려지는 과정

이렇게 정리했다.