'웹 프로그래밍/React' 카테고리의 글 목록

웹 프로그래밍/React (4)

[react] 리액트 버튼 아이콘 사용하기

웹 프로그래밍/React 범범조조 2023. 1. 13. 19:48

개요 오늘은 리액트에서 버튼에 아이콘을 입히는? 방법에 대해서 알려 드리도록 하겠습니다. 저도 현재 리액트를 배우고 있는 초보자로써, 추후에 잊어버리지 않게 하기 위해 정리 진행합니다. 1. react-icon 홈페이지 방문 react-icon 해당 홈페이지에 들어가게 되면, 아주 다양한 리액트에서 사용할 수 있는 아이콘들을 제공해 주고 있습니다. 2. 설치하기 홈페이지에 가면, home 메뉴에 react-icon을 사용하는 가이드 라인을 제공해 주고 있습니다. react-icon 을 사용하려면, 아래 명령어를 통해 설치를 진행해 주어야 합니다. npm install react-icons --save 위 명령어를 입력하여 설치 진행해 줍니다. 3. 사용하려는 react 프로젝트에 import 하기 앞서 ..

[React] JSX 란?

웹 프로그래밍/React 범범조조 2022. 12. 11. 20:52

참고 https://ko.reactjs.org/docs/introducing-jsx.html JSX란? React 에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등) 과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 컴포넌트 라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. JSX에 표현식 포함하기 아래 예시에서는 name 이라는 변수를 선언한 후, 중..

React - 상단 메뉴 만들기

웹 프로그래밍/React 범범조조 2022. 12. 11. 02:00

개요 React 에서 상단 메뉴를 만드는 방법에 대해서 공부 겸 어떻게 만드는지 정리 진행합니다. 참고로, 저희 React 를 이제 막 배우는 입장에서 공부하고 정리하는 내용이라서, 틀린 부분이나 부족한 부분이 많으니 참고해주세요~!! App.js HTML 태그 추가 React 에서 기본으로 프로젝트를 생성하게 되면, src 폴더에 App.js 파일이 생성됩니다. App.js 가 기본 메인 페이지라고 생각하면 됩니다. 여기서 저는 작업을 진행해 보도록 하겠습니다. 웹 페이지에 들어가게 되면, 기본 상단에는 항상 메뉴들이 표시가 되어 있는데 React 에서는 어떻게 상단 메뉴를 표시하는지 한번 예제 코드를 작성해 보겠습니다. import logo from "./logo.svg"; import "./App...

[React] 개발 환경 설정 (2022 버전)

웹 프로그래밍/React 범범조조 2022. 12. 10. 20:59

개요 2022년 현재 기준으로, React 개발 환경 설정하는 방법에 대해서 정리 진행합니다. 1. Nodejs 설치 React 를 실행하기 위해서는 Nodejs 를 선행적으로 설치 해야 합니다. 구글에 Nodejs 를 입력 후, LTS 라고 써 있는 버전을 선택하여 본인의 Local PC 에 설치 진행합니다. 2. Nodejs 버전 확인 Nodejs 설치가 완료 되면, cmd(명령 프롬프트) 실행 하여 정상적으로 Nodejs 가 설치 되었는지 버전 확인 진행합니다. C:\Users\afsdz>node -v v18.12.1 3. React 프로젝트 생성 Nodejs 를 설치 하였다면, 이제 React 실행 준비는 완료 된 것입니다. 그럼 실제로 React 프로젝트 파일을 생성하는 방법에 대해서 알려 드리..

1

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바