Anglar 사용자를 위한 React 저렴한 보드

평소 Anglar로 썼고 리액트도 배우기 시작해 Anglar 사용자의 시각으로 리액트의 작법을 정리했다.
좀 더 자세히 말씀드리자면 항목을 늘릴 생각입니다.

ng new my-app

Type Script로 작성하려는 경우 추가--template typescript.

npx create-react-app my-app --template typescript

[foo]="bar"

Anglar의 속성@Input().
부모님께 가격을 드리려면props에게 가격을 드리세요.props는 이음 영화이기 때문에 구성 요소 내에서 수치를 가지고 놀지 않습니다.

const MyButton: React.FC<{ label: string }> = (props) => {
  return <button>{props.label}</button>;
};

const SaveButton = () => {
  const label = 'Save';
  retrun <MyButton label={label} />;
};

(click)="onClick()"

이벤트 처리 프로그램 함수의 참조를 작성 이벤트에 전달함으로써 이벤트 발생 시 처리를 수행할 수 있습니다.

const MyButton: React.FC = () => {
  const handleClick = () => {
    console.log('clicked!');
  };
  return <button onClick={handleClick}>My button</button>;
};

브라우저 이벤트를 수락하려는 경우

내선으로 쓰면 활동의 형식을 추론할 수 있다.

const MyButton: React.FC = () => {
  return <button onClick={(e) => console.log(e)}>My button</button>;
};

전파 사건

부모 구성 요소에 이벤트의 변경 사항을 전달하기 위해 이벤트 처리 프로그램 함수를proops로 정의하고 부모 구성 요소에 전달합니다.

type Props = {
  value: string;
  onChange: (value: string) => void
};

const MyInput: React.FC<Props> = (props) => {
  return (
    <input
      value={props.value}
      onChange={(e) => props.onChange(e.target.value)}
    />
  );
};

Anglar와 달리 React는 시간에 따라 변경할 수 있는 값을 관리하기 위해 state가 필요합니다.

// ステートフックを用いて関数でコンポーネントを作成する場合
const SearchBox: React.FC = () => {
  const [keyword, onChangeKeyword] = useState('');
  return (
    <fieldset>
      <legend>Search:</legend>
      <MyInput value={keyword} onChange={(v) => onChangeKeyword(v)} />
    </fieldset>
  );
};

// クラスを用いてコンポーネントを作成する場合
class SearchBox extends React.Component<{}, { value: string }> {
  state = {
    value: ''
  };
  render() {
    return (
      <fieldset>
        <legend>Search:</legend>
        <MyInput
	  value={value}
	  onChange={(value) => this.setState({ value })}
	/>
      </fieldset>
    );
  }
}

*ngIf

{}식 삽입 및 && 방법 사용

// <></>で囲うことでng-containerと同様に余分なDOMを生成しない
<>
  {somethingList.length > 0 && <ListContainer items={somethingList} />}
</>

세 개의 연산자를 사용하는if-else

<>
  {loggedIn ? <LogoutButton /> : <LoginButton />}
</>

*ngFor

맵을 사용하여 ReactDOM으로 변환합니다.
유일한 식별 요소로 키를 React에 건네주는 것을 잊지 마라.

<div>
  {users.map((user) => <User key={user.id} user={user} />)}
</div>

주석 출력

<div>
  {/* <MyComponent /> */}
<div>

<ng-content></ng-content>

어셈블리의 서브요소는 props.children에서 사용할 수 있습니다.

const ScrollableContainer: React.FC = (props) => {
  return (
    <div className="ScrollableContainer">
      {props.children}
    </div>
  );
};

<ScrollableContainer>
  <h1>Orders</h1>
  <ul>
    {orderList.map(order => <li>{order.name}</li>)}
  </ul>
</ScrollableContainer>

어셈블리의 유형 지정React.FC<P>인 경우 Proces의 유형 정의를 수행하지 않아도 추가children

// Reactの型定義ファイルを覗くとchildrenプロパティが追加されてるのがわかる
type PropsWithChildren<P> = P & { children?: ReactNode };

children의 유형에서도 알 수 있도록 끼워넣고 싶은 구성 요소(children과 달리)를proops에 넣고 전달할 수 있습니다.

const Dialog: React.FC<{ header: ReactNode }> = (props) => {
  return (
    <div className="Dialog">
      <div class="Dialog-header">
        {props.header}
      </div>
      <div class="Dialog-content">
        {props.children}
      </div>
    </div>
  );
};

ngOnInit / ngOnChanges / ngOnDestroy

Anglar의 어셈블리에 라이프 사이클이 있는 것처럼 React의 어셈블리에도 라이프 사이클이 있습니다.

class UserProfile extends React.Component<Props, State> {
  componentDidMount() {
    // コンポーネントがDOMツリーに挿入された後に呼び出される
    // HTTPリクエストの呼び出しに適した場所
    fetchUser(this.props.userId).then((user) => this.setState(user));
  }
  componentDidUpdate() {
    // propsが更新されたときに呼び出される
    fetchUser(this.props.userId).then((user) => this.setState(user));
  }
  render() {
    // renderにはstateを書き換えるなど副作用をもたせてはいけない
    return /* ... */;
  }
}

주의점으로 Anglar에서 ngon Init를 호출한 것은 첫 번째 ngon Changes 이후 처음으로 ngon Changes를 호출한 것이다.
다른 한편, React의 component DitUpdate는 첫 번째 DOM 렌더링을 할 때 호출되지 않습니다.
구성 요소가 DOM 트리에서 삭제되었을 때, 처리를 실행하려면component Will Unmount에서 설명합니다

class UserProfile extends React.Component<Props, State> {
  componentDidMount() {
    subscribeUser(this.props.userId, (user) => this.setState(user));
  }
  componentWillUnmount() {
    unsubscribeUser(this.props.userId, (user) => this.setState(user));
  }
  render() {
    return /* ... */;
  }
}

함수 구성 요소에서 React의 생명주기 활용

const UserProfile: React.FC<Props> = (props) => {
  const [user, setUser] = useState<User | null>(null);
  useEffect(() => {
    subscribeUser(props.userId, (user) => setUser(user));
    return () => unsubscribeUser(props.userId, (user) => setUser(user));
  });
  return /* ... */;
};

참고 자료

React 공식 문서

React+TypeScript Cheatsheets