Language/React16 [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. [React 공식 Advanced Doc] Code-Splitting - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Bundling 대부분의 React app들은 Webpack 이나 Browserify 같은 tool 을 이용한 bundling된 파일들로 구성되어 있다. 여기서 bundling 이란 import 된 파일들을 1개의 파일로 합치는 프로세스를 말한다. 그리고 이때 생성된 1개의 파일을 "bundle" 이라 한다. 이렇게 "bundle" 이 만들어 지게 되면 webpage 에서 전체 app을 한번에 로딩될 수 있다. import { add } from './math.js'; console.log(add(16, 26)); export function add(a, b) {.. 2021. 2. 11. [React 공식 Doc 가이드 #12] Thinking in React - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Thinking in React React는 JavaScript 를 사용하는 대규모 Web app 일 빌드하고, 빠른 Web app 을 만들기 위한 최고의 방법이다. Facebook 과 Instagram 과 같은 큰 규모의 앱 제작에서도 사용되었다. React는 마치 프로그래머가 app 을 빌드하는 것처럼 app 에 대해 생각하게 만든다는 점이다.무슨말인지 이해가 가지 않을 것이다. 이번 문서에서는 React를 이용해서 검색을 할 수 있는 상품 테이블을 만드는 과정을 통해 위의 문장의 의미를 알아볼 것이다. - Start With A Mock 서버에 JSON AP.. 2021. 2. 11. [React 공식 Doc 가이드 #11] Lifting State Up - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Lifting State Up 때로는 같은 data에 대하여 여러개의 Component가 영향을 받는 경우가 있다. 이런 경우에 해당 Component 들의 최소 공통 조상 레벨로 state 를 올려서 공유하면 유용하다. 이번 Section 에서는 주어진 온도에서 물이 끓을 수 있느냐를 판단하는 온도계산기를 만들면서 State를 올린다는게 무슨말인지 이해해보자. 처음에 BoilingVerdict 라는 Component 로 시작을 할 것이다. 섭씨 온도를 prop 으로 받아서 물이 끓을 수 있는지 여부를 출력하는 기능을 가지고 있다. function BoilingV.. 2021. 2. 11. [React 공식 Doc 가이드 #10] Forms - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Forms HTML form element 는 다른 DOM element 와 다르게 동작한다. 우리가 form submit 을 써봤으면 알 수 있듯이 내부의 상태(state) 를 가지면서 동작하기 때문이다. HTML 에서 기본적으로 form 태그를 이용해서 submit 을 하면 다른 페이지로 이동하게 되어있다. 물론 React 에서도 원하면 똑같이 할 수 있다. 하지만 대부분의 경우에는 submit 을 다루는 javascript 함수를 정의하고 User 가 form 태그안에 들어왔을 때 data 에 접근하는 용도로 사용한다. 일반적으로 이런방식을 "controll.. 2021. 2. 11. [React 공식 Doc 가이드 #9] Lists and Keys - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Lists and Keys 우선 Javascript 와 관련된 예제를 한번 보자. 위의 예제는 map function 을 이용하여 numbers 에 저장된 배열값들의 2배의 값 목록을 doubled 변수에 저장 후 log 로 출력하였다. React 에서는 배열을 element 의 list 로 변환할 때 위와 같은 방식을 많이 사용 한다. - Rendering Multiple Components JSX 안에서 collection 들을 {} 을 이용하여 build 할 수 있다. 위의 예제에서 JavaScript 의 map() function 을 사용해서 numbers.. 2021. 2. 11. [React 공식 Doc 가이드 #8] Conditional Rendering - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Conditional Rendering React 에서 Rendering 하고 싶은 element 들을 캡슐화해서 Component 단위로 만들 수 있다. 그리고 이런 Component 들을 state 상태에 따라서 조건부 렌더링을 할 수 있다. React 에서 조건부 렌더링은 Javascript 에서 분기문과 같은 방법으로 동작한다. if 문이나 조건부 문법을 사용해서 elements 를 만들면 React 는 이 element 에 맞춰서 UI를 갱신한다. 아래 2개의 component 가 있다고 가정하자. 2개의 Component 를 화면에 이상없이 출력하였다... 2021. 2. 11. [React 공식 Doc 가이드 #7] Handling events - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - React 에서의 Event React element 에서의 event 사용법은 DOM element 에서 사용하는 법과 비슷하지만 구문적으로 약간의 차이가 있다. React 에서는 소문자 대신 camelCase를 사용한다. 스트링으로 함수를 쓰지 않고 JSX 문법으로 event handler 함수를 넘긴다. 예를들어 HTML 에서는 아래와 같이 쓰는 button click 예제가 React 에서는 아래와 같이 된다. 또 하나 다른점은 보통 기본동작을 막기 위해 preventDefault 대신 onclick 에서 return false 를 쓰기도 하는데, Reac.. 2021. 2. 11. 이전 1 2 다음
