FrontEnd/React11 [React] JSX와 state, onClick, Component (코딩애플 유튜브 무료강의) 유튜브 코딩애플 수업 듣는 중 JSX 문법 class 넣을 땐, className 변수 꽂을 땐(== 데이터 바인딩), {변수명} style 넣을 땐, style={{ 이름: '값' }} import './App.css'; function App() { let post = '강남 우동 맛집'; return ( 블로그 {post} ); } export default App; .App { text-align: center; } .black-nav { display: flex; background: black; width: 100%; color: white; padding-left: 20px; } ※ 리턴 소괄호 안에는 무적권 하나의 태그만 있어야함 state 리액트에서 자료를 잠깐 저장할 때 사용함 impo.. 2024. 3. 28. [React] 리액트 다시 처음부터 시작해보기 (코딩애플 유튜브 무료강의) 유튜브 코딩애플 수업 듣는 중 장점 SPA Single Page Application 페이지 전환을 부드럽게 해줌 Component로 html 재사용 편리 데이터가 html에 자동 반영 프로젝트 시작하기 ▼ 새폴더 만들고 Shift 우클릭 → 여기에 PowerShell 창 열기 ▼ 파워셸에 npx create-react-app 프로젝트명 써주기 create-react-app == 라이브러리 npm == 라이브러리 다 모아놓은 플랫폼 (node.js 설치하면 자동으로 딸려옴) ▼ 완료되면 만들었던 새파일에 blog라는 폴더가 생기고 안에 이것저것 생겨버림 ▼ VS코드에 Open Folder → blog 열어서 폴더 선택해주기 ▼ 열면 옆에 이런 것들 있는데 App.js 안에 코드를 짜는 것임 더보기 pub.. 2024. 3. 28. [React] 간단실습.03 (롤 챔피언 정보 페이지 만들기) https://developer.riotgames.com/docs/lol >> 챔피언 목록 만들기 >> 챔피언 이름 클릭하면 상세 페이지 나오게 하기 ▼ 코드 ▼ 더보기 App.js import Champ from './Champ'; import ChampDetail from './ChampDetail' import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'; function App() { return ( ); } export default App; Champ.js import {Link} from 'react-router-dom'; import React, { useState, useEffect } from "react"; imp.. 2023. 9. 15. [React] React : Styling 1. inLine Styling 컴포넌트 내부에 style 속성을 직접 적용하여 인라인 스타일을 적용함 자바스크립트 형태로 작성되며, 컴포넌트의 JSX 요소에 직접 지정 > 가장 유명함! 자바스크립트 코드 안에서 스타일을 작성하고 관리할 수 있는 방식 styled-component를 사용하여 템플릿 리터럴 문법으로 컴포넌트와 관련된 스타일을 정의할 수 있음 import style from 'styled-component'; const MyButton = styled.button` background-color: tomato; color: white; `; funcion MyComponent() { return Hello } >> 설치 해야 쓸 수 있음 4. 외부 CSS 프레임워크 및 라이브러리 외부 프레.. 2023. 9. 15. [React] 간단실습.02 (장바구니, 타이머, 색깔상자) 1. 장바구니 입력 창에 장바구니에 넣을 것을 적어서 추가하기 완료 항목은 체크 / 삭제 가능 ▼ ver.1 체크 더보기 import React, {useState} from "react"; const ListItem = ({id, text, input}) => { return ( {text} ) }; const ListSet = ({data}) => { return ( {data.map((item) => ( ))} ); }; const Cart = () => { const [items, setItem] = useState([]); const [input, inputValue] = useState(''); const handleChange = (event) => { inputValue(event.targ.. 2023. 9. 13. [React] 헷깔리는 것 정리 # function 키워드 화살표 함수 도입 이전에 많이 쓰던 것 function sum(a, b) { } const func = function sum(a, b) { } 지금은 거의 다 화살표 함수 쓰기 때문에 Function 키워드 잘 안씀 # 괄호 블록 { } 변수 { } 매개변수 ( ) 화살표 함수에서 쓰는 () {} { } : 여러줄 또는 return 있을 때 ( ) : 한줄 또는 return 없을 때 # 전개연산자 ... ... 새로운 배열을 생성해서 원본 배열이 변경되지 않음 함수형 프로그래밍은 불변성의 원칙에 따라 새로운 상태나 데이터 구조를 만드는 것이 권장됨 >> 함수형 프로그래밍은 조각조각 나있으니까 예기치 않은 데이터 수정이나 부작용(side effect)이 발생하는 것을 방지할 수.. 2023. 9. 13. [React] 간단실습.01 (로그인, 할일목록, 로또, 바꾸기) 1. 사용자의 로그인 상태에 따라 다른 메세지를 보여주는 컴포넌트 작성하기 >> Name을 적고 Login을 클릭해야 로그인 됨 더보기 import React from "react"; class Login extends React.Component { constructor(props) { super(props); this.state = { name: '', isLog: false }; this.handleLogin = this.handleLogin.bind(this); this.handleLogout = this.handleLogout.bind(this); this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSu.. 2023. 9. 11. [React] 03 # export, import, export default 자바스크립트 모듈 시스템에서 export, import는 모듈 간의 기능을 공유하기 위해 사용되는 키워드 export 현재 모듈에서 정의된 함수, 객체, 값 등을 다른 자바스크립트 파일에서 사용할수 있도록 공개함 >> 퍼가셍~ import 다른 자바스크립트 파일에서 export된 기능을 가져오기 위해 사용 >> 퍼가요~ export default 모듈당 하나만 가능한 기본 내보내기 디폴트로 내보낸 값은 {중괄호} 없이 임폴트할 수 있음 >> 딴데서 나 써도 댕 # 아이템 추가 및 삭제 아이템을 추가하기 위해서는 기존 배열을 변경하는 것이 아니라 새로운 배열을 생성하고 이를 State로 관리해야 함 >> 그냥 아예 새로운거 집어넣어버림 const .. 2023. 9. 11. [React] 02 # 변수 var let const 함수 범위 블록 범위 상수 재선언 · 재할당 허용 O 재선언 허용 X // 재할당 허용 O 재선언 · 재할당 허용 X # 라이프사이클 메드 = 컴포넌트 생명주기 관련 메서드 이러한 메서드들은 특정 시점에 자동으로 호출됨 생명주기: 컴포넌트의 생성, 변경, 소멸 과정 componentDidMount 컴포넌트가 처음 DOM에 마운트된 직후에 호출됨 여기에 API 호출과 같은 비동기 작업을 수행함 componentDidUpdate 컴포넌트가 업데이트 된 직후에 호출됨 초기 랜더링 작업에서는 호출되지 않음 업데이트, 변경사항, 요청 등을 처리하는데 사용 componentWillUnmount 컴포넌트가 DOM에서 제거되기 직전에 호출됨 >> 타이머 해제, 구독 해제 등 정리 작업.. 2023. 9. 11. [React] 01 # React https://react.dev/ React The library for web and native user interfaces react.dev 리액트는 페이스북에서 개발된 JavaScript 라이브러리 사용자 인터페이스(UI)를 구축하기 위해 활용 주요 목표 : UI를 더 간단하고 효율적으로 구성하기 위함 컴포넌트 기반 아키텍처를 중심으로 동작 # 엘리먼트 컴포넌트의 구성요소! React 앱의 가장 작은 단위 화면에 표시할 내용을 기술 일반 불변 객체, 쉽게 생성 가능 # 컴포넌트 UI의 작은 부분을 독립적으로 관리하는 단위 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별로 살펴볼 수 있음 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용되는 코드블록단.. 2023. 9. 11. [React] React 시작하기 필요한 것 2개 Node.js Reactjs code snippets # Node.js 설치 # Reactjs code snippets 1. VS코드에서 Install 2. 대괄호 빼기 3. cd 프로젝트파일 → npm start 4. 리액트 시작! 주의!! 예시1) 저장하면 실시간으로 반영됨 예시2) 예시3) 2023. 9. 8. 이전 1 다음
