Wecode 18일차

08:00~09:30 헬스장
10:00 위코드 도착

이번주부터는 매일 아침마다 한시간씩 code kata를 하고있다. 알고리즘 문제를 푸는 건데 아직은 로직을 짜는 것만 해도 버겁다.

오늘은 css 파일은 scss파일로 변환했다. Nested 한다는 게 처음 해서 복잡해보이긴 했지만 한눈에 더 직관적으로 알아보기 쉽게 표현된다는 게 장점인것 같다.

내일 있을 state, props 세션을 예습겸 간단히 개념 정리를 해보겠다.

State

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
화면에 보여줄 컴포넌트의 UI정보를 가지고 있는 객체

Class형 컴포넌트에서 state

import React from 'react';

class State extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
      //state의 상태값을 정의
    };
  }

  render() {
    return (
      <div>
        <h1>Class Component | State</h1>
      </div>
    );
  }
}

export default State;

• render 함수 위 constructor 함수는 아직은 개념적으로는 어려우므로 일단 필수적으로 쓰이는 것으로 생각. 안에는 반드시 super()를 호풀
• this.state 값에 컴포넌트의 초기 상태값을 설정

state 객체

    this.state = {
      color: 'red'

• 컴포넌트의 state는 객체

state의 사용 예시

import React, { Component } from 'react';

export class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
      </div>
    );
  }
}

export default State;

• h1 스타일을 constructor 함수 내부의 color를 호출하기 위해 this.sate.color값을 호출한다.(red가 호출됨)

Props

컴포넌트의 속성값
props는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체

// Parent.js

import React from 'react';
import Child from '../pages/Children/Children';
//자식 컴포넌트를 import함

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <Child titleColor={this.state.color}/>
        //자식 컴포넌트에게 부모 컴포넌트의 state객체 중 color값을 전달
      </div>
    );
  }
}

export default State;

• state와 마찬가지로 props도 객체다.

// Child.js

import React from 'react';

class Child extends React.Component {
  render() {
		// console.log(this.props);

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
      </div>
    );
  }
}

export default State;

• h1 해당 태그의 글자 색상을 부모 컴포넌트의 state로부터 전달 받은 데이터를 지정.
• this.props는 부모 컴포넌트의 값을 전달받음. 그래서 this.props.titleColor는 red임.
  * 좀 더 공부가 필요함!! 개념정리 다시 할것!