국비교육/React (7) 썸네일형 리스트형 React - 감정 일기장 만들기 #03 공통으로 사용할 버튼을 컴포넌트로 구현하겠습니다 src 아래 component 폴더를 만들어주세요 그 안에 Button.js 파일을 만들어줄게요 import "./Button.css"; const Button = ({ text, type, onClick }) => { return 버튼; }; export default Button; 버튼.js 입니다 ! 위와같이 코드를 작성해주시고 css 파일도 만들어줄게요 .Button { cursor: pointer; border: none; border-radius: 5px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; font-size: 18px; white-sp.. React - 감정일기장 만들기 #02 오늘은 저번 시간에 이어 감정일기장을 만들어보겠습니다 import { Routes, Route, Link } from "react-router-dom"; import "./App.css"; import "./util.js"; import Home from "./pages/Home.js"; import Edit from "./pages/Edit.js"; import New from "./pages/New.js"; import Diary from "./pages/Diary.js"; function App() { return ( Home Edit New Diary ); } export default App; app 컴포넌트를 위와 같이 수정해주세요 다이어리페이지는 특정 id를 가진 일기를 상세 조회할 때 사용.. React - 감정 일기장 만들기 #01 오늘은 학습했던 내용들을 바탕으로 감정 일기장 / 다이어리를 만들어보겠습니다 . 감정 일기장은 일기를 작성하면서 그날의 자기 감정을 표현하는 서비스입니다. 대충 4개의 페이지로 구현하면 좋을 것 같습니다 사용자를 처음으로 반겨주는 Home 페이지 , 새로운 일기를 추가하는 New 페이지 , 작성한 일기를 상세조회하는 Diary 페이지, 작성한 일기를 수정하는 Edit 페이지 이렇게 총 4개의 페이지로 구성해보도록 하겠습니다 . React 초기 세팅과 프로젝트 파일을 만들고,깔끔하게 정리하는 과정은 생략하도록 하겠습니다 . 먼저 작업에 앞서 , 기본 폰트는 꼴도보기싫으니까 로컬저장소에 저장되어있는 메이플스토리 볼드 폰트를 가져오도록 하겠습니다 이렇게 바디에 적용해주면 뾰로롱 하고 이쁜 폰트가 적용이 됩니다.. React 예제풀이 #03 useRef useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 라이프사이클을 통해 유지될 것입니다. useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다. 우리가 자바스크립트를 사용 할 때에는, 우리가 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용한다. React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요하다. 그럴때 우리는 useRef라는 React Hook을 사용한다. 이제 관련된 예제를 만들어보고 실습해볼게요 ~ 먼저 App.js를 작성해줍니다 import .. React 예제풀이 #02 useEffect를 사용한 특정 조건에 따른 결과값 출력하기 이번에는 useEffect 를 이용해 특정 조건에 따른 결과값 출력을 해보겠습니다~ useEffect는 React Hook으로, 함수 컴포넌트에서 부수 효과(side effects)를 수행할 수 있도록 해줍니다. 부수 효과란 컴포넌트 내에서 상태를 변경하거나 외부 데이터를 가져오는 등의 작업을 말합니다. useEffect는 다음과 같은 시나리오에서 유용하게 사용됩니다: 렌더링 이후 작업 실행: 컴포넌트가 렌더링된 후 특정 작업을 수행해야 하는 경우에 사용됩니다. 예를 들어, 데이터를 가져오거나 DOM 요소에 접근하는 등의 작업이 이에 해당합니다. 의존성 변경 감지: 특정 상태나 프로퍼티의 값이 변경될 때마다 작업을 수행해야 하는 경우에 사용됩니다. useEffect의 두 번째 매개변수로 의존성 배열(de.. React 예제풀이 # 01 - 카운터를 통하여 알아보는 자바스크립트와 리액트의 차이점,장단점 React를 이용한 counter 구현, Javascript를 이용한 counter구현을 비교해보면서 구조적으로 어떤 차이점을 가지고 있는지, 왜 React를 이용하여 구현하는 것이 더 좋은지에 대해 얘기해보려고합니다 ! 먼저 React 프로젝트를 시작하기 앞서 해당 프로젝트가 저장될 폴더를 만들어주세요 저는 리액트 공부를 위한 프로젝트폴더니까 React_study라는 폴더를 만들었습니다 ~ CMD를 실행해 다음과 같이 명령어를 입력해주세요. ** cd 폴더위치 ** 해주시는거 잊지 마시구요 $ npm install -g create-react-app $ create-react-app my-app 저는 다음과 같이 작성했습니다 이렇게 이동해주고 npx create-react-app study 그럼 cmd.. #React 리액트(React)를 왜 사용해야 할까? 오늘부터 리액트를 학습한 내용들을 바탕으로 리액트에 대해 정리해보도록 하겠슴다. 1. 완성도 높고 이해하기 쉬운 개발 워크플로우 웹 개발에 React.js를 사용하는 주요 이유 중 하나는 라이브러리에 최적화된 개발 인터페이스와 코딩 언어 때문입니다. 빠른 성능으로 강화된 가벼운 React API는 신속한 개발 워크플로우를 구현합니다. React 구성 요소와 개념은 이해하기 쉬우므로 이 부분에 대한 *러닝 커브가 높지 않습니다. * 러닝 커브 = 신기술을 학습하는 데에 소요되는 시간을 나타내는 곡선 즉 보다 직관적이고 편리한 사용성을 이점으로 가져갑니다 2. 뛰어난 유연성과 호환성 웹 개발에 React.js를 사용하면 매우 편리한데, 그 이유는 한번 익힌 기술을 다양한 플랫폼에서 쉽게 재사용할 수 있기 때.. 이전 1 다음
