SERIES

React 공식문서 - MAIN CONCEPTS

React - Getting Started(시작하기)

2019년 1월 25일

Getting Started https://reactjs.org/docs/getting-started.html - 번역글 React는 사용자 인터페이스를 작성하기 위한 JavaScript 라이브러리입니다. - - Try React - Learn React - Staying Informed - Versioned Documentation - Someth...

Add React to a Website(웹 사이트에 React 추가)

2019년 1월 25일

https://reactjs.org/docs/add-react-to-a-website.html - 번역 글 React는 처음부터 점진적으로 채택되도록 설계되었으므로 필요한만큼 React를 사용할 수 있습니다.. 기존페이지에 섞여 상호작용하기를 원할 것입니다. React Component는 이를 수행하는 좋은 방법입니다. 대부분의 웹 사이트는 단일 페이...

Create a New React App

2019년 1월 26일

https://reactjs.org/docs/create-a-new-react-app.html - 번역글 최고의 사용자 및 개발경험을 위해 통합된 툴체인을 사용하십시오. 이 페이지는 다음과 같은 작업에 도움이되는 React 툴체인에 대해 설명합니다 : - 많은 file 및 component 확장 - npm third-party 라이브러리 사용 - 개발...

CDN Links

2019년 1월 26일

https://reactjs.org/docs/cdn-links.html - 번역글 React와 ReactDOM은 모두 CDN에서 사용할 수 있습니다. 또한 사용중인 CDN이 Access-Control-Allow-Origin: *HTTP header를 설정하는지 확인하는 것이 좋습니다. cors 이것은 React 16 이후 더 나은 error ha...

Hello World

2019년 1월 27일

https://reactjs.org/docs/hello-world.html - 번역 글 가장 작은 React의 예제는 다음과 같습니다. 페이지에 "Hello, world!"라는 문자열을 표시합니다. CodePen 위의 링크를 클릭하여 온라인 편집기를 엽니다. 자유롭게 변경하고 어떻게 변경되는지 확인하세요. 이 가이드 페이지에는 위와 같이 편집 가능...

Introducing JSX(JSX 소개)

2019년 1월 28일

https://reactjs.org/docs/introducing-jsx.html - 번역 글 다음 변수 선언을 확인하세요. 이 객체는 "React elements"라고 부릅니다. 화면에서 볼 수 있는 내용에 대한 설명으로 생각할 수 있습니다. React는 이 객체를 읽어들이고 이를 사용하여 DOM을 구성하고 최신 상태로 유지합니다. 다음 섹션에서 ...

Rendering Elements(요소 렌더링)

2019년 1월 28일

https://reactjs.org/docs/rendering-elements.html - 번역 글 요소는 React 앱의 가장 작은 구성 블록입니다. 요소는 화면에 표시할 내용을 설명합니다. CodePen 이 예제는 setInterval() 콜백을 이용해 매 초마다 ReactDOM.render() 를 호출하고 있습니다. Note 실제로 대부분...

Components and Props(컴포넌트와 Props)

2019년 1월 28일

https://reactjs.org/docs/components-and-props.html - 번역 글 컴포넌트를 사용하여 UI를 독립적이고 재사용 가능한 부분으로 분할하고 각 부분을 독립적으로 생각 할수 있습니다. 이 페이지는 컴포넌트에 대한 소개를 제공합니다. 컴포넌트 API는 여기에서 참고 하세요. 개념상 컴포넌트는 자바스크립트 함수와 비슷합니다....

State and Lifecycle(State와 라이프사이클)

2019년 1월 28일

https://reactjs.org/docs/state-and-lifecycle.html - 번역 글 이 페이지에서는 React 컴포넌트의 상태 및 수명주기 개념을 소개합니다. 자세한 컴포넌트 API 참조는 여기에서 찾을 수 있습니다 . 이전 섹션 에서 보았던 시계를 살펴봅니다. Rendering Elements 에서는 UI를 업데이트하는 방법 중 하...

Handling Events(이벤트 제어하기)

2019년 1월 29일

https://reactjs.org/docs/handling-events.html - 번역 글 React 요소의 이벤트를 제어하는 것은 몇가지 문법적인 차이가 있지만, DOM 요소 이벤트를 제어하는 것과 매우 유사합니다. - React 이벤트는 소문자가 아닌 camelCase를 사용하여 명명됩니다. - JSX에 문자열 대신 함수를 전달합니다. 예를 ...

Conditional Rendering(조건부 렌더링)

2019년 1월 29일

https://reactjs.org/docs/conditional-rendering.html - 번역 글 React에서는 필요한 동작을하는 캡슐화된 고유 한 컴포넌트를 만들 수 있습니다. 그런 다음 응용 프로그램의 state에 따라 일부만 렌더링 할 수 있습니다. React의 조건부 렌더링은 JavaScript가 동작하는 것과 같은 방식으로 동작합니다....

Lists and Keys(리스트와 키)

2019년 1월 29일

https://reactjs.org/docs/lists-and-keys.html - 번역 글 자바 스크립트에서 목록을 변환하는 방법을 살펴 보겠습니다. 아래의 코드는 map()함수를 사용하여 배열의 numbers값을 두 배로 늘립니다. map()이 반환하는 새로운 배열의 참조를 변수 doubled에 저장합니다. CodePen 코드가 더 명확해질 수...

Forms(폼)

2019년 1월 30일

https://reactjs.org/docs/forms.html - 번역 글 HTML 폼 요소는 자체 내부 상태를 갖고 있기 때문에, 폼은 React에서 다른 DOM 요소와 조금 다르게 작동합니다. 예를 들어, 순수한 HTML에서 이 폼은 이름을 받습니다. - Alternatives to Controlled Components(제어되는 구성요...

Lifting State Up(state 끌어 올리기)

2019년 1월 31일

https://reactjs.org/docs/lifting-state-up.html - 번역 글 종종 여러 컴포넌트에 동일한 변경 데이터 변경을 반영하고 싶은 필요가 있습니다. 이럴 때 공통 조상에 state를 끌어올리는 걸 권장합니다. 어떻게 하는 지 살펴봅시다. 이 섹션에서는 주어진 온도에서 물의 끊음 여부를 계산하는 온도 계산기를 작성합니다. 먼...

Composition vs Inheritance (구성 vs 상속)

2019년 1월 31일

https://reactjs.org/docs/composition-vs-inheritance.html - 번역 글 React는 강력한 구성 모델을 가지고 있으며 상속 대신 구성을 사용하여 컴포넌트 사이의 코드를 재활용하는 걸 권장합니다. 이 섹션에서는 React를 처음 사용하는 개발자가 상속을 위해 종종 도달하는 몇 가지 문제를 살펴보고 구성을 통해 문...

Thinking in React(리엑트스럽게 생각하기)

2019년 2월 1일

https://reactjs.org/docs/thinking-in-react.html 번역글 React는 자바스크립트로 크고 빠른 웹 애플리케이션을 만드는 최고의 방법이라고 생각합니다. Facebook과 Instagram도 React를 사용하였으며 앱이 커질 때 아주 유용했습니다. React의 가장 중요한 부분 중 하나는 앱을 제작할 때 앱을 어떻게 만...