이 글은 React 공식 문서 - JavaScript in JSX with Curly Braces 를 번역한 것 입니다. JavaScript in JSX with Curly Braces 마크업을 작성하는 과정에서 약간의 JS 로직을 추가하거나, 동적으로 Props를 참조하고 싶을 때가 있습니다. 이럴 때에는 중괄호를 사용할 수 있습니다. 우리가 배우게 될 내용들 문자열을 전달하는 방법 중괄호를 통해 JSX문법에 JS 변수를 사용하는 방법 중괄호를 통해 JSX문법에서 JS 함수를 실행하는 방법 중괄호를 통해 JS Object를 사용하는 방법 Passing strings with quotes JSX 속성에 string을 전달 할려면, 따옴표나, 쌍따옴표를 사용하면 됩니다. 와 를 동적인 값으로 특정 변수에 넣어서 JSX 속성으로 전달 할 수 있습니다. 여기서 주의 해야 할 부분은 className의 avatar와 변수 이름의 avatar의 차이를 알고 있어야 합니다. 그리고 중괄호…

이 글은 React 공식 문서 - Writing Markup with JSX 를 번역한 것 입니다. Writing Markup with JSX 문법은 JS파일 안에서 JS를 통해 HTML 마크업을 할 수 있도록 하는 문법입니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자는 JSX문법을 사용하는 것을 선호 합니다. 우리가 배우게 될 내용들 React가 마크업과 랜더링 로직을 혼합한 이유 JSX가 HTML과 다른 점 JSX로 정보를 나타내는 방법 JSX: Putting markup into JavaScript WEB은 HTML, CSS, JS를 기반으로 구축되었습니다. 수년 동안, 웹 개발자들은 개발 할 때 콘텐츠는 HTML에, 디자인은 CSS에 로직은 JS에 각각 별도의 파일에서 관리했습니다. 콘텐츠는 HTML안에 마크업 되고, 웹 페이지 로직은 JS안에 별도로 있었습니다. 그러나 웹이 점점 인터렉티브하게 되어지면서, JS 로직이 콘텐츠를 결정하는 비중이 …

이 글은 React 공식 문서 - Importing and Exporting Components를 번역한 것 입니다. Importing and Exporting Components 컴포넌트의 가장 큰 장점은 재사용성입니다. 대신 주의 해야할 부분은 하나의 컴포넌트 안에 다양한 컴포넌트가 중첩 될 때, 다른 파일로 분할해서 관리하는 것이 좋습니다. 이렇게 하면, 컴포넌트를 관리하기 편합니다. 우리가 배우게 될 내용들 Root 컴포넌트의 의미 컴포넌트를 import 및 export 하는 방법 default, named import, export 사용 방법 import 하는 방법과 하나의 파일에서 여러개의 컴포넌트를 export하는 방법 컴포넌트를 여러 파일로 분할하는 방법 The root component file 기본적으로 CRA(Create React App)을 실행하면, 에 루트 컴포넌트 파일이 생성됩니다. 그러나 는 루트 컴포넌트가 페이지마다 다를 수 있습니다. Export…

이 글은 React 공식 문서 - Your First Component를 번역한 것 입니다. Your First Component 는 React에서 핵심 개념 중 하나입니다. Component는 UI를 구축하는 기반입니다. 우리가 배우게 될 내용들 Component란? React에서 Component의 역할은? Component를 개발하는 방법은? Components: UI Building Blocks WEB에서 HTML을 사용하면 과 와 같은 태그가 내장된 구조가 있는 문서(Mark up)를 만들 수 있습니다. 이 마크업은 Article , Heading (약칭) 목차 중 목록이 순서대로 정의되었다는 것을 로 나타냅니다. 스타일을 위한 CSS와 상호작용을 위한 JS와 결합된 마크업은 웹에서 볼 수 있는 모든 UI(Sidebar, Avatar, Modal, Dropdown 등)를 제공합니다. React APP을 개발할 때, 재사용 가능한 UI (마크업, CSS, JS가 포함되어 있…

이 글은 Siegfried Grimbeek가 작성한 React Hook Form vs. Formik: A technical and performance comparison 일부를 번역한 글 입니다. 소개 우리는 React로 개발하면서 Form에 대한 많은 어려움을 겪고 있습니다. 예를 들어 Form 안의 정보 조작, 유효성 검사, 상태 관리 등의 어려움을 가지고 개발을 하고 있습니다. 이러한 문제점을 해결해 주기 위해, Formik이 개발되어졌고 더 나아가, Formik의 일부 단점을 해결해주기 위해 React Hook Form이 등장했습니다. React Hook Form과 Formik의 비교 다음은 React Hook Form과 Formik의 다운로드 통계입니다. 아래와 같이 2022년 부터 React Hook Form의 다운로드 수가 Formik을 넘어섰습니다. 단순히 다운로스 수가 많다고 어떤 라이브러리가 더 좋다고 판단 할 수 없습니다. 대신 위에 보이는 라이브러리의 사이…

이 글은 React - Manipulating the DOM with Refs를 번역한 것 입니다. 🌈 Ref를 통해 DOM을 조작하는 방법. React는 자동적으로 우리가 만든 JSX 컴포넌트를 DOM에 업데이트 합니다. 그래서 우리는 DOM을 조작할 일이 흔치 않게 됩니다. 그러나, 우리는 때때로 React가 처리하는 DOM Node Element에 접근할 필요가 있습니다. 예를 들어 Node를 Focus, Scroll하거나 Size와 Position을 측정할 때 접근해야 합니다. 그래서 우리는 이번 시간에 를 통해 어떻게 React에서 관리는 DOM Node를 처리하는지 알아보겠습니다. ✅ 학습 내용 Ref를 통해 특정 Node에 접근하는 방법. React가 관리하는 DOM Node를 접근하기 위해서는 import useRef hook을 합니다. 그런 다음, 아래와 같이 Component 내부에 ref를 선언 합니다. 마지막으로, React가 관리하는 DOM Node에 …

이 글은 React - Describing the UI를 번역한 것 입니다. 🌈 Describing the UI 리액트는 UI를 랜더링하는 JS 라이브러리 입니다. UI는 , , 같은 작은 단위로 구성되어 있습니다. 리액트에서는 이러한 UI들을 통해 컴포넌트를 만들 수 있고, 이 컴포넌트들을 통해 재사용 혹은 연관성 있는 것들로 또 다른 컴포넌트들을 만들 수 있습니다. 또한 웹 사이트, 앱 그리고 모든 스크린은 컴포넌트로 구성되어 있습니다. 그래서 우리는 이번 챕터에서 컴포넌트를 만들고, 조작해보는 시간을 가져보겠습니다. ✅ 학습 내용 Component React App은 독립적인 UI Component들로 구성되어 있습니다. 하나의 Component는 JS 함수입니다.(마크업이 안에 존재합니다.) 그리고 Component는 작은 버튼일 수도 있고, 전체 페이지일 수도 있습니다. 📕 참고 React - Describing the UI ✅ 학습 내용 Component 📕 참고