728x90 반응형 리액트14 리액트 Props를 알아보자 먼저 리액트 프로젝트의 구조입니다. App.js는 이렇게 작성하였습니다. 여기서 버튼을 컴포넌트화 시켜서 사용하는데 color라는 props를 전달하여 사용할 수 있습니다. 이제 버튼 컴포넌트로 가서 버튼에 스타일을 props로 넘겨 받아 사용하였습니다. 결과입니다. 이렇게 하는 장점은 무엇일까요? props는 여러 수준의 구성 요소를 통해 전달될 수 있으므로 복잡한 UI를 더 간단한 빌딩 블록으로 구성할 수 있습니다. 전반적으로 props는 React에서 모듈식의 재사용 가능하고 유연한 UI 구성 요소를 구축하기 위한 중요한 도구입니다. 다음에는 useState에 대해 알아보겠습니다. 2023. 3. 21. 자바스크립트의 JSX 확장 구문과 리액트 컴포넌트에서의 활용 방법 jsx란 자바스크립트에서 HTML과 같은 코드를 작성할 수 있게 해주는 확장 구문입니다. 예를 들어 다음과 같이 쓸 수 있습니다. const element = Hello, World!; JSX의 주요 이점 중 하나 중괄호를 사용하여 HTML과 같은 코드 내에서 JavaScript 표현식을 작성할 수 있다는 것입니다. 이렇게 하면 콘텐츠를 동적으로 생성하고 데이터 및 사용자 입력을 기반으로 애플리케이션의 구조를 조작하기가 쉬워집니다. 예를들어 const items = ['apple', 'banana', 'orange']; const list = ( {items.map((item) => ( {item} ))} ); JSX를 사용하여 이와 같은 데이터 배열을 기반으로 항목 목록을 생성할 수 있습니다. 리액트는.. 2023. 2. 28. 리액트 컴포넌트 생성 및 활용 가이드: 기본 세팅과 컴포넌트 재사용의 이점 일단 컴포넌트를 작성하기 전에 기본 세팅부터 하겠습니다. index.js 폴더에서 위의 코드는 index.html에 root라는 id를 가진 div 태그를 리액트 기본 루트 돔으로 쓰겠다는 의미의 코드입니다. 을 감싸고 있는 를 지워줍니다. 해당 코드는 검사를 위한 코드로 우리가 테스트 프로젝트를 작성할 때 딱히 필요하지 않고 console.log() 사용시 에러가 발생할 수 있습니다. 이번에는 App.js에 들어와서 import logo from './logo.svg'; 와 태그 안에 있는 코드를 지워줍니다. 또한 스타일에 관련된 index.css app.css 안에 코드들도 지워줍니다. 해당 코드는 기본 스타일로써 내장되있던것입니다. 위와 같이 비워준 화면입니다. 저는 태그도 프레그먼트 태그로 비워주.. 2023. 2. 27. 리액트 사용의 이점과 시작 가이드: 프로젝트 구조 이해 및 기본 컴포넌트 생성 방법 리액트를 사용해야 하는 이유 구성 요소 기반 아키텍처: React는 구성 요소 기반 라이브러리로 코드를 쉽게 재사용할 수 있고 애플리케이션의 다른 부분을 쉽게 유지 관리하고 업데이트할 수 있습니다. 선언적 프로그래밍: React를 사용하면 응용 프로그램의 상태와 일치하도록 DOM을 변경하는 방법에 대해 걱정할 필요가 없습니다. 원하는 UI 모양을 선언하기만 하면 React가 나머지를 처리합니다. 가상 DOM: React는 가상 DOM을 사용합니다. 업데이트가 필요한 항목만 업데이트하여 성능과 속도를 개선하는 데 도움이 됩니다. JSX: React의 JSX 구문을 사용하면 HTML과 같은 코드를 쉽게 작성할 수 있습니다. 더 쉽게 읽고 이해할 수 있습니다. 크고 활동적인 커뮤니티: React에는 크고 활동.. 2023. 2. 27. 이전 1 2 다음 728x90 반응형
