본문 바로가기
  • 살짝 구운 김 유나

Web/React13

[React] 블로그 제작 2 - 동적인 UI, 삼항연산자 동적인 UI 만들기 - 사용자가 조작 시 형태가 바뀌는 UI 동적인 UI 만드는 3단계! 1. html, css로 미리 UI를 만들기 2. UI의 현재 상태를 state로 저장 3. state에 따라서 UI가 어떻게 보일지 코드 작성 예시) 모달창 띄우기 1. html, css로 미리 UI를 만들기 // App.js function Modal() { return ( 제목 날짜 상세 내용 ) } // App.css .modal { margin-top: 20px; padding : 20px; background : #eee; text-align: left; } 2. 현재 상태 저장 // UI의 현재 상태 let [modal, setModal] = useState(false); 3. state에 따라서 UI가.. 2022. 12. 7.
[React] 블로그 제작 1 - onClick, state 변경, Component onClick 사용법 C 대문자 주의 { } 중괄호 사용 그냥 코드가 아니라 함수를 넣어야 잘 작동 // 함수를 그 자리에 직접 만들어도 O { 실행할 코드 } }> 함수 정의 function 함수명() { 실행할 내용,, 코드,,, } state 변경하는 방법 - state 변경 함수를 사용해야 함!! let [ 자료이름, state 변경 함수 ] = useState(자료); 예시) import { useState } from 'react'; import './App.css'; function App() { let [titles, f] = useState(['크로스핏 컴백한 날', '운동하는데 첫 눈 왔당', '서울 가야하는 이유 + 1']); // 버튼 클릭시 좋아요 +1 => 자주 변경될 것이기 때.. 2022. 12. 1.
[React] React 시작하기 프로젝트 생성하기 1. 작업용 폴더 만들기 2. 폴더 shift + 마우스 우클릭 -> powershell 열기 3. 라이브러리의 도움을 받아서 프로젝트 생성 npx create-reaxt-app 프로젝트명 프로젝트 구조 node_modules : 프로젝트 구동에 필요한 라이브러리 코드 보관함 public : static 파일 모아놓는 곳 src : 코드 짜는 곳 package.json : 프로젝트 정보 JSX ? : 자바스크립트의 확장 문법. XML와 매우 흡사 - 공식적인 자바스크립트 문법은 X JSX 문법 3가지 1. HTML에 class 넣을 때 className으로 - App.js에서 작성하고 있는 것은 HTML이 아니라 JSX 이기 때문 - class는 클래스를 정의하는 예약어 이기 때문에 대.. 2022. 11. 30.