TIL

react (예문은 공식문서 참조)

컴포넌트

• 함수 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• 클래스 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• 컴포넌트의 이름은 항상 대문자로 시작합니다.
  • 종종 생각지 못하고 오류를 찾아다니는 경험을 함.
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.
• 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 됩니다.

state

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

• 주의사항
  • 직접 State를 수정하지 마세요
  • State 업데이트는 비동기적일 수도 있습니다.
  • State 업데이트는 병합됩니다
  • 데이터는 아래로 흐릅니다

생명주기

• componentDidMount : 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행

• componentDidUpdate : 컴포넌트가 업데이트 되고 실행

• componentWillUnmount : 컴포넌트 제거시 실행

• 사용해보긴 했지만 잘 모르겠다.

이벤트 처리

• 이벤트 핸들러 함수 적용시 생성자 내에서 아래와 같이 적용할 것.

this.handleClick = this.handleClick.bind(this);

• 이벤트 핸들러에 인자 전달하기 (해본적 없음)

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

위 두 줄은 동등하며 각각 화살표 함수와 Function.prototype.bind를 사용합니다.

두 경우 모두 React 이벤트를 나타내는 e 인자가 ID 뒤에 두 번째 인자로 전달됩니다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind를 사용할 경우 추가 인자가 자동으로 전달됩니다.

조건부 렌더링

• 삼항연산자 사용
• 렌더링하고 싶지 않을때는 null값을 준다.

리스트와 키

function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

form과 state 끌어올리기

• 사용은 하였지만 자세한 설명은 공식문서로.

---

오늘 한 일

• react 학습
• 간소한 트위틀러 스프린트 완료
• 프리코스시절에 작성한 트위틀러를 react로 다시 구성하였다.
• 코드 샌드박스 사용해봄
• leetcode
  • Robot Return to Origin (easy)
  • The K Weakest Rows in a Matrix (easy)
  • Squares of a Sorted Array (easy)
  • Unique Number of Occurrences (easy)
  • Peak Index in a Mountain Array (easy)

---

To Do

• scss 도 활용을 생각해보면 좋을것 같다.

• typescript 공부 예제를 생각해보자

• vue, angular 공부 해보자

---

오늘은...

리액트 사용의 첫날 사실 오늘 스프린트는 개인 진행이라 어제 밤에 간략히 확인하여 대략적인 틀을 완성하였고 점심 이전에 스프린트 요구사항은 충족할 수 있었다. 생각으로는 더 진행할수 있을 것 같지만 확실한 방법이 떠오르지 않아 시행착오만 반복하다가 그냥 스프린트는 요구사항만 만족하고 끝내고 프리 코스 시절에 작성했던 트위틀러를 react로 동일한 기능을 보일수 있게끔 재구성하였다. 물론 만들어진 모습이 매우 누덕누덕하지만...
뭐 이를 다시 뜯어보면서 더 깔끔하게 만드는 것도 생각해봐야 겠다.

예전에 상자 추가 제거 만들었던걸 react로 다시 만들어 본 것 누덕누덕 하다.