본문 바로가기

리액트3

[React 공식 Advanced Doc] Forwarding Refs - 이 글은 React 공식 홈페이지 Docs https://facebook.github.io/react-native/ 에 기반하여 작성한 글입니다 - Forwarding Refs Ref forwarding은 component에서 그의 자식들에게 ref를 자동으로 전파하는 기법이다. 일반적인 Component에서 사용할일은 없겠지만 특정 상황에서는 유용하게 사용된다. 특히 재사용가능한 component 라이브러리같은 경우가 그렇다. ref를 사용하는 일반적인 시나리오를 살펴보자. - Forwarding refs to DOM components DOM의 button을 rendering 하는 FancyButton component가 있다고 가정해보자. function FancyButton(props) { r.. 2021. 2. 11.
[React 공식 Advanced Doc] Fragment - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Fragments React 에서 1 Component 안에서 복수개의 element들을 반환하는 형태가 일반적이다. 이때 반환하는 element 부분에서 최상위 노드가 1개 여야 하는데, "Fragment"는 여러개의 element 노드를 강제로 같은 DOM 노드로 엮을 필요 없이 1개의 그룹으로 엮어준다. render() { return ( ); } React.Fragment를 선언할 때 줄임문법(일종의 sugar syntax)가 있긴 하지만, 공식 Doc 에서는 일반적인 tool 모두가 지원하지는 않는다고 하는거 보니 쓰기를 권장하지는 않는 것 같다. - M.. 2021. 2. 11.
[React 공식 Advanced Doc] Error Boundaries - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Error Boundaries 이전 버전까지는 component 안에서 발생한 Javascript error가 React의 내부상태를 망가뜨리거나, emit, cryptic, errors 에러들의 원인이었다. 이런 에러들은 app 코드에서는 미리알 수 있는 에러들이었지만, React에서는 Component안에서 그 에러들을 다룰 수 있는 방법이 없었고, 복구기능도 없었다. - Introducing Error Boundaries 어떤 특정 UI에서 발생한 JavaScript 에러가 전체 app을 망가뜨려서는 안된다. React를 쓰는 사용자들에게 이런 문제를 해결해.. 2021. 2. 11.