효니 TIL

리액트에서 props는 컴포넌트 간에 데이터를 전달하기 위해 사용되는 중요한 개념입니다. props props는 "properties"의 줄임말로, 컴포넌트에 전달되는 입력값을 의미합니다.부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. props는 읽기 전용(read-only)이며, 자식 컴포넌트에서 수정할 수 없습니다.   Props를 사용하는 방법부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기// App.jsimport UserProfile from './UserProfile';function App() { return ( );}export default App;위 코드에서 App 컴포넌트는 자식 컴포넌트인 UserProfile 컴포넌트에name, ag..

따옴표로 문자열 전달하기  문자열 어트리뷰트를 JSX에 전달하려면 작은따옴표나 큰따옴표로 묶어야 합니다.export default function Avatar() { return ( );}여기에서 "https://i.imgur.com/7vQD0fPs.jpg"와 "Gregorio Y. Zara"가 문자열로 전달되고 있습니다. 위 코드의 src, alt를 동적으로 지정하려면 " 와 "를 { 와 }로 바꿔 JavaScript의 값을 사용할 수 있습니다.export default function Avatar() { const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; const description = 'Gregorio Y. Zara'; return ( ..

컴포넌트(Component)리액트 컴포넌트는 리액트 애플리케이션의 기본 구성 요소로,독립적이고 재사용 가능한 코드 블록입니다.리액트 컴포넌트는 사용자 인터페이스(UI)를 정의하고 구성하는 데 사용됩니다.리액트 컴포넌트를 사용하면 애플리케이션을 작은 단위로 나눌 수 있어 관리와 유지보수가 용이합니다. 리액트 컴포넌트의 종류는 크게 두 가지로 나눌 수 있습니다.함수형 컴포넌트(Function Component)클래스형 컴포넌트(Class Component)이 포스팅에서는 함수형 컴포넌트에 대해 알아보겠습니다.  React 컴포넌트는 마크업으로 뿌릴 수 있는 JavaScript 함수입니다. 서로 같은 것끼리 그룹핑을 해서 이름을 붙여 사용자 정의 태그를 만든 것이 컴포넌트이며,React에서 사용자 정의 태그를..

JSX리액트(React)에서 사용하는 JSX는 자바스크립트(JavaScript)를 확장한 문법입니다.JSX를 사용하면 자바스크립트 코드 안에서 HTML과 비슷하게 마크업을 작성할 수 있도록 해줍니다. JSX의 장점가독성: HTML과 비슷한 구문을 사용하므로, 웹 개발자가 쉽게 읽고 이해할 수 있습니다.간결함: 복잡한 UI 구조를 간단하게 표현할 수 있습니다.코드와 마크업 통합: 자바스크립트와 마크업을 같은 파일에 작성하여 컴포넌트 기반 개발을 쉽게 할 수 있습니다.  JSX: JavaScript에 마크업 넣기 import React from 'react';function HelloWorld() { return ( Hello, World! );}export default Hell..

컴포넌트 import 및 export 하기리액트 컴포넌트의 import와 export는 자바스크립트 ES6 모듈 시스템을 사용하여다른 파일에서 컴포넌트를 가져오거나 내보내는 방법입니다.이를 통해 코드의 모듈화와 재사용성이 높아집니다.  1. Default Export와 Import Default Export 기본 내보내기(default export)는 파일당 하나의 주요 컴포넌트를 내보낼 때 사용됩니다.기본 내보내기를 할 때는 export default를 사용합니다.// 컴포넌트 파일 MyComponent.jsfunction MyComponent() { return Hello, World!;}export default MyComponent;위의 코드에서 MyComponent 컴포넌트를 기본으로 내보내..

Create React App(CRA)초기 환경을 일일이 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 셋업을 완료해 놓은 틀이라고 보면 된다. React 앱을 만들 때는 React 라이브러리뿐 아니라 Webpack, Babel 등의 라이브러리들이 필요하다.Webpack은 리액트 프로젝트에서 사용되는 여러 개의 자바스크립트 파일을 하나로 합쳐주는 모듈 번들러이며,Babel은 프로젝트에서 JSX 문법을 사용할 수 있게 해 준다. 이외에도 다양한 라이브러리를 사용하는데,이런 부수적인 모듈을 개발자가 일일이 다운로드하기는 번거로운 일이다. (아래 화면과 같은 세팅은 매우 번거롭다.) 이렇게 패키지 등 번거로운 react 초기 세팅 작업을 미리 하고,그 환경을 다시 패키징 한 것이 바로 create-rea..