본문 바로가기

React/Documentation24

리액트 공식 문서 번역-04. 중괄호로 JSX 내에서 JavaScript 사용하기 JSX를 사용하면 JavaScript 파일 내에서 HTML과 유사한 마크업을 작성하여 렌더링 로직과 콘텐츠를 동일한 위치에 유지할 수 있습니다. 때로는 해당 마크업 내에서 약간의 JavaScript 로직을 추가하거나 동적 속성을 참조해야 할 때가 있습니다. 이 경우 JSX 내에서 중괄호를 사용하여 JavaScript에 대한 창문을 열 수 있습니다. 따옴표로 문자열 전달하기 JSX에 문자열 속성을 전달하려면, 작은 따옴표나 큰 따옴표 안에 넣습니다 https://codesandbox.io/s/yirdx9?file=/App.js&utm_medium=sandpack optimistic-gauss-yirdx9 - CodeSandbox optimistic-gauss-yirdx9 using react, react-.. 2023. 7. 9.
리액트 공식 문서 번역-03. JSX로 마크업 작성하기 JSX는 자바스크립트에서 HTML과 비슷한 마크업을 작성할 수 있게 해주는 문법 확장입니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자들은 JSX의 간결함을 선호하며 대부분의 코드베이스에서 사용합니다. JSX: JavaScript에 마크업을 넣기 웹은 HTML, CSS 및 JavaScript로 구축되었습니다. 오랫동안 웹 개발자들은 콘텐츠를 HTML에, 디자인을 CSS에, 그리고 로직을 JavaScript에 두었습니다 - 종종 서로 다른 파일에! 콘텐츠는 HTML 내부에서 마크업되었으며 페이지의 로직은 JavaScript에서 따로 처리되었습니다 하지만 웹이 더욱 interactive 해짐에 따라, 로직이 콘텐츠를 결정하는 경우가 많아졌습니다. JavaScript가 HTML을 지배.. 2023. 7. 9.
리액트 공식 문서 번역-02. 컴포넌트 가져오기 및 내보내기 React는 사용자 인터페이스(UI)를 렌더링하는 JavaScript 라이브러리입니다. UI는 버튼, 텍스트, 이미지와 같은 작은 단위로 구성됩니다. React를 사용하면 이러한 작은 단위를 재사용 가능하고 중첩 가능한 컴포넌트로 결합할 수 있습니다. 웹 사이트에서부터 전화 앱에 이르기까지, 화면에 표시되는 모든 것을 구성 요소로 분해할 수 있습니다. 이 장에서는 React 컴포넌트를 생성하고 사용자 정의하며, 조건에 따라 표시하는 방법을 배우게 됩니다. 첫 번째 컴포넌트 리액트 애플리케이션은 컴포넌트라 불리는 UI의 격리된 부분들로 구성됩니다. 리액트 컴포넌트는 마크업으로 구성된 일종의 자바스크립트 함수입니다. 컴포넌트는 버튼과 같은 작은 부분부터 전체 페이지까지 다양한 크기와 형태를 가질 수 있습니다.. 2023. 7. 8.
리액트 공식 문서 번역-01. 첫 번째 구성 요소 컴포넌트는 React의 핵심 개념 중 하나입니다. UI를 구축하는 데 필요한 기반이며, 이는 React 여행을 시작하기에 완벽한 장소입니다! 컴포넌트: UI 구성 요소 웹에서 HTML은 과 와 같은 내장 태그를 사용하여 구조화된 문서를 만드는 데 사용됩니다. My First Component Components: UI Building Blocks Defining a Component Using a Component 마크업은 이러한 기본 태그( 및 )를 사용하여 구조화된 문서를 만드는 데 사용됩니다. 이러한 마크업은 스타일을 위한 CSS 및 상호 작용을 위한 JavaScript와 결합되어 사이드바, 아바타, 모달, 드롭다운 등과 같은 모든 UI 요소를 웹에서 볼 수 있도록합니다. React를 사용하면 마크.. 2023. 7. 8.