리액트 헷갈리는 것들

리린·2021년 7월 12일
0

React

목록 보기
3/47

this.props.children

  • this.props.children은
    <하위Component> 값 </하위Component> 의 '값'이 props.children의 값으로 들어가게 됩니다.
  • 코드
import React, { Component } from "react";
import LifeCycleSample from "./LifeCycleSample";
import ErrorBoundary from "./ErrorBoundary";
function getRandomColor() {
  return "#" + Math.floor(Math.random() * 16777215).toString(16);
}
class App extends Component {
  state = {
    color: "#000000",
  };
  handleClick = () => {
    this.setState({
      color: getRandomColor(),
    });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>랜덤색상</button>
        <ErrorBoundary>
          <LifeCycleSample color={this.state.color} />
        </ErrorBoundary>
      </div>
    );
  }
}
export default App;

출처는 여기

&& 연산자

  • (앞)&& (뒤)

https://velog.io/@eunjin/React-%EA%B0%80%EB%8F%85%EC%84%B1%EC%9D%84-%EB%86%92%EC%9D%B8-%EC%A1%B0%EA%B1%B4%EB%B6%80%EB%A0%8C%EB%8D%94%EB%A7%81#:~:text=%26%26%20%ED%8C%A8%ED%84%B4%EC%9D%80%20(%EC%84%A0%ED%96%89%20%EC%A1%B0%EA%B1%B4,%ED%95%9C%20%EA%B2%B0%EA%B3%BC%EB%A5%BC%20%EB%B0%98%ED%99%98%ED%95%9C%EB%8B%A4.&text=%EC%9D%B4%EB%B2%A4%ED%8A%B8%20%EA%B8%B0%EA%B0%84%EC%97%90%EB%8A%94%20%EA%B0%9C%EC%9D%B8%EC%A0%95%EB%B3%B4,%EC%B1%84%2C%20%EC%9D%B4%EB%B2%A4%ED%8A%B8%20%EB%AC%B8%EA%B5%AC%EB%A5%BC%20%EB%B3%B4%EC%97%AC%EC%A4%80%EB%8B%A4.

profile
개발자지망생

0개의 댓글