[TIL] 20210708

🎯 오늘 공부한 것

• [React] JSX 문법
• [React] 클래스형 컴포넌트 vs 함수형 컴포넌트
• [React] props 개념
  • props의 값을 어디서 정해주는 건지 이런게 좀 헷갈려서 부모 컴포넌트인 App.js를 진짜 부모로, 자식 컴포넌트인 Children.js을 진짜 자식으로 가정하는 비유를 생각해봤다.

 

./App.js

import React, { Component } from 'react';
import Children from './components/Children';

class App extends Component {
    render() {
      return (
         <div className="App">
            {/* 부모가 자녀에게 장래희망은 선생님으로, 
            미래 재테크는 부동산으로 하라고 주입했다 */}
            <Children futureJob="teacher" investment="real_estate"></Children>
         </div>
      )
    }
}

export default App;

./components/Children.js

import React, { Component } from 'react';

class Children extends Component {
    render() {
        return (
            <article>
            	{/* 자식이 미래에 어떤 직업을 가질지, 
                어떤 재테크를 선택할 것인지 
                그 값을 담을 그릇(key)은 자식에게 있다 */}
                <p>장래희망 : {this.props.futureJob}</p>
                <p>재테크 방법 : {this.props.investment}</p>
            </article>
        )
    }
}

// 부모가 값을 지정하지 않는다면 
// 자식은 기본적으로 아티스트가 될 기질을 갖고 있었다
Children.defaultProps = {
	futureJob: "artist"
}

export default Children;

• 이게 뭔 말인가 싶을 수 있지만 그냥 내가 안 헷갈리려고 생각해본 비유다.
• 결론적으로, 부모 컴포넌트에서 자식 컴포넌트의 props로 값을 주입하는 것이었다.

---

📚 보충해야 할 것

• [React] props, state 개념 정리

---

🎇 Reflection

• 리액트를 시작했다. 교재는 생활코딩 책인데, 쉬운 언어로 쓰여져 금방 읽을 수 있을 거라고 생각하고 호기롭게 오늘 안에 다 읽겠다고 계획을 세웠는데 그건 역시 안됐다.
• 블로그에 공부한 내용을 정리할 때 내가 이해한 대로 정리하자! 하는 마음으로 비유를 들어 정리해봤는데 나 자신이 너무 문과 인간인가? 하는 약간의 자괴감이 든다... ㅎ 이런 거 말고 젤 좋은 거는 혼자 프로젝트하고 삽질하고 해결하는 경험을 글로 남기는 것일텐데... 주말에는 꼭 프로젝트 구현하자 ㅠ
• 내일부터 리액트 스터디를 시작하기로 했다. 열심히 하자.