Dev/React3 리액트 찍먹 3 - Component 컴포넌트 컴포넌트는 쉽게 말해 UI를 구성하는 UI 요소를 의미한다. 리액트 홈페이지의 공식 문서에 따르면 컴포넌트를 사용하면 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다고 설명한다. '재사용 가능'과 '개별적으로 살표 볼 수 있음'이 핵심이라고 볼 수 있을 것 같다. 컴포넌트는 간단히 이런식으로 사용할 수 있다. 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다. 함수 안에 UI를 제작하여 컴포넌트를 사용할 부분에 HTML 태그를 사용하는 것 처럼 을 써주면 되는 것! 이로써 HTML을 줄여 쓸 수 있는 것이다. 이렇게 함수로 작성한 컴포넌트를 함수 컴포넌트라고 호칭하고 ES6의 class를 사용하여 정의할 수도 있는데 클래스 컴포넌.. 2023. 4. 21. 리액트 찍먹 2 찍먹 과정인 만큼 리액트로 간단하게 블로그 UI를 구성 했다! 1. navbar 생성 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 차례대로 App.js와 App.css App.js의 필요없는 부분을 모두 삭제하고 네이게이션 bar만 간단히 생성했다. (정말 구색용 ㅎㅎ..) class 대신 className을 사용할 것! 자동완성 덕분에 헷갈릴 일은 없다. 반응형도 잘 적용 되었다! 2. 제목과 내용을 보여주는 List - state로 변수 만들기 HTML 삽입 미리보기할 수 없는 소스 state로 제목 데이터를 저장했다. App() 함수의 return 위에 작성해주면 된다. state를 사용하려면 js 파일 최상단에 꼭 import React, { useState } .. 2023. 4. 14. 리액트 찍먹 1 1. 리액트 설치 및 셋팅 node.js와 VS Code 다운로드가 필요하다. LTS 말고 현재 버전(비번역은 Current 어쩌고라 나왔을 것)을 설치 했다. (VS Code는 이미 사용 중이었어서 캡쳐 패스...) 다운로드가 완료 되었으면 Work Space를 생성해야 한다. 자신이 원하는 위치에 원하는 이름으로 원하는 폴더를 만들면 된다. 나는 C드라이브에 생성해주었다. 폴더 생성 후 상단 메뉴 중 File-Opend Folder로 방금 생성한 폴더를 불러오고 위와 같이 터미널에 npx create-react-app '프로젝트명' 을 입력해준다. 프로젝트를 생성하는 방법이다. 코드 입력 전 빨간 밑줄친 부분을 확인 해야하는데 빨간 밑줄이 본인이 생성한 폴더명으로 끝나야 폴더를 잘 불러온 것이다. 코.. 2023. 4. 13. 이전 1 다음
