React
-
[React.js] 리액트 문법 1 (+ JSX, DOM, API)React 2022. 12. 31. 22:55
JSX 리액트 element를 생성하는 JavaScript 확장 문법이다. 리액트에서는 렌더링 로직이 UI 로직 즉, 이벤트가 처리되거나 시간에 따라 state가 변하는 방식, 화면에 출력할 데이터가 준비되는 방식과 연결된다는 사실을 받아들인다. 따라서 마크업과 로직을 모두 포함하는 '컴포넌트'라는 느슨하게 연결된 유닛으로 분리하여 구성된다. JSX 안에서는 중괄호 { } 로 감싸서 유효한 모든 JS 표현식을 넣을 수 있다. JSX 는 표현식이기 때문에, JSX 자체를 if 나 for 반복문 안에서 사용하고, 변수에 할당하고, 인자로 받거나 함수에서 리턴할 수도 있다. JSX에 속성(attribute)를 전달할 때는 src={user.avatarUrl} 처럼 따옴표를 사용하지 않고, 중괄호만 쓴다. 따옴..
-
[React Project] 1. 주제 선정 & 일정 수립React 2022. 10. 31. 11:45
주제 크림 사이트 참고하여 의류 중고거래 쇼핑몰 제작 클론 코딩 페이지 구성 및 업무 분할 [현진] - 메인페이지 -검색 -헤더(스타일,샵,자주 묻는 질문, 공지사항, 마이 페이지) -프로모션 슬라이드 -키워드를 통한 페이지 이동 메뉴 -새로 발매된 제품 - 마이페이지(로그인&회원가입) [호경] - 스타일 -사진, 상품 태그, 키워드 해시태그 -공감 버튼 -댓글 -공유버튼 - 관심상품(장바구니) - 고객센터 - about 페이지 [현성] - 샵 -상세페이지 프로젝트 일정 10/31(월) 일정 조율 및 업무 담당 + UML 제작 11/1(월) ~ 11/6(일) 각자 담당한 페이지 완성시키기 11/7(월) ~ 11/9(수) 각 페이지 연동 및 테스트 11/10(목) ~ 11/12(토) 프로젝트 디테일 수정 ..
-
[React.js] React 기초5 (+ useEffect, fetch, react Hooks, useNavigate, PUT, DELETE, POST)React 2022. 10. 30. 17:25
* 렌더링 : 리액트에서는 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업이다. DayList.js import { useEffect,useState } from "react"; import { Link } from "react-router-dom"; import dummy from "../db/data.json"; export default function DayList(){ const [days, setDays]=useState([]); // API에서 데이터를 갖고와서 바꿔주는 방식으로 하겠다 // 따라서 데이터가 바뀌면 자동으로 렌더링 될 것이다. const [count, setCount] = useState(0); function onc..
-
[React.js] React 기초4 (+ react-router-dom, REST API, JSON server)React 2022. 10. 30. 13:05
먼저 npm install react-router-dom 으로 설치해준다. 리액트 6버전에서 Switch 가 빠지고 Routes로 변경되었다. html 에서는 를 사용하지만, 리액트에서는 를 사용한다. App.js import Header from './component/Header'; import DayList from './component/DayList'; import Day from './component/Day'; // 마지막 .js는 생략할 수 있다. import { BrowserRouter, Route, Routes } from 'react-router-dom'; import EmptyPage from './component/EmptyPage'; function App() { return (..
-
[React.js] React 기초3 (+ props, 더미 데이터 구현, map(), filter())React 2022. 10. 28. 00:18
props : properties , 속성값을 의미한다. Hello.js import { useState } from "react"; import UserName from "./UserName"; export default function Hello({age}){ // let name="Mike"; const [name, setName] = useState('Mike'); //useState 는 배열을 반환하며, //배열의 첫번째 값은 state(변수명), //두번째 값은 이 스테이트를 변경해주는 함수, 괄호 안에 초기값 전달 //함수가 작동해서 스테이트가 바뀌면, 리액트는 이 컴포넌트를 다시 렌더링해준다. // 동일한 컴포넌트를 여러 번 사용해도 스테이트는 각각 관리된다. //마이크일 땐 제인으로, 제..
-
[React.js] React 기초2 (+ css 파일, 이벤트 처리, state)React 2022. 10. 27. 00:03
component 폴더에서 Hello.js 파일로 컴포넌트를 만들었다. Hello.js // 첫번째 방법 : 함수 선언문 // const Hello=function(){ // Hello; // } import World from "./World"; // export default Hello; // 두번째 방법 : 화살표 함수 //const Hello2=()=>{ // Hello; //} // export default Hello; // 세번째 방법 : 한줄로 쓰기 export default function Hello(){ return ( {/* css를 인라인으로 작성할 땐 반드시 객체 형태로 전달한다 키값은 카멜케이스로 작성한다. 그냥 숫자만 있는 것을 제외한 문자열은 다 따옴표로 감싸주자 하지만 특별..
-
[React.js] React 기초1 (+ App.js)React 2022. 10. 26. 00:22
node.js 와 create-react-app 을 설치했다면 리액트 프로젝트를 저장할 폴더를 미리 생성해놓고, 경로 이동을 한 뒤에 터미널 창을 켜서 아래 명령을 실행한다. * npx 는 npm에 올라가 있는 패키지를 바로 실행해서 설치시켜주는 도구이다. 설치가 되는 화면을 보여주다가 잠시 아래 화면처럼 뜨는 것을 볼 수 있다. voca 라는 폴더 안에 실제 프로젝트가 생성된 것을 볼 수 있다. 생성된 프로젝트 폴더를 vs code에서 연다. 자동으로 폴더와 파일들이 세팅되어 있는 것을 확인할 수 있다. create-react-app 에서 쉽고 빠르게 프로젝트를 시작할 수 있도록 미리 만들어준 것이다. vs code 하단에 있는 터미널 창에서 npm start 를 입력하면 실행이 되면서, 자동으로 브라..
-
[JS] 중급문법3 (+ String, Array 에서의 다양한 메소드들)React 2022. 10. 23. 12:41
String html 문장은 내부에서 " "를 사용하는 게 많기 때문에, ' '로 감싸주는 게 좋다 영어로 된 문장은 내부에서 ' '를 사용하는 게 많기 떄문에, " "로 감싸주는 게 좋다. 백틱(` `)으로 감싼 문장은 ${ }를 이용해 변수나 표현식을 써서 출력할 수 있다. ` 은 여러 줄로 이루어진 문장을 \n 없이 쓸 수 있다. length를 이용해 문자열의 길이를 알아낼 수 있다. [인덱스 번호] 를 이용해서 특정 문자의 위치를 접근할 수 있다. 인덱스 번호는 당연히 0부터 시작하며, 다만 한글자씩 변경시킬 수 없다. toUpperCase() 는 모든 문자를 대문자로 바꿔준다. toLowerCase() 는 모든 문자를 소문자로 바꿔준다. str.indexOf('hi') 를 쓰면, 해당 문자열에서..