본문 바로가기
728x90
반응형

프로그래밍&IT/React & CSS

 (38)
Coding Apple, React 강좌 내용 정리.17 - Redux.1 Redux 컴포넌트간에 줄줄이 엮어서 사용하는 props 대신에 redux라는걸 사용할 수 있다. 연결된 컴포넌트들이 state의 공유가 가능하다. Redux 사용하기 위한 순서 1. 설치 터미널에서 npm install redux react-redux 2 . 사용 준비 in code import {Provider} from 'react-redux' // Provider 생성 import { createStore } from 'redux' // redux 생성 필요한 부분을 감싸기 - 로 state를 공유할 대상을 ( ) 감싼다 - 공유할 state를 createStore 함수로 생성한다. let store = createStore( state를 가져오고 리턴하는 함수() ); - createStore로..
Coding Apple, React 강좌 내용 정리.16 - Tab UI , animation Tab UI (React-Bootstrap 활용) 간단한 애니메이션 (해당 tab의 content변경시 서서히 나타나게) 개요 UI상태 (여기선 tab) 를 true/false state로 저장해둠 선택한 tab에 따라 해당 content ( , ) 의 내용을 나타나게 한다. 이왕 서서히 나타나게 하는 간단한 애니메이션을 추가한다. Tab 만들기 React 부트스트랩에서 찾아 복사해서 붙여넣기로 (링크) {/* defaultActiveKey : 기본적으로 눌러진 버튼의 eventKey 부트스트랩의 mt-5 이용 */} {/* 버튼들마다 유니크한 eventKey 부여하기 */} Active Option 2 누른탭의 정보, 번호를 저장할 state 만들기 let [누른탭, 누른탭변경] = useState(0..
Coding Apple, React 강좌 내용 정리.15 - Component in Component , build 명령어 Component in Component 어쩔수없이 저번까지 진행한 소스 내용 (App.js 지금까지) import './App.css'; import React, {useState} from 'react' import 'bootstrap/dist/css/bootstrap.min.css'; import {Button, Container,Navbar, Nav, NavDropdown, Card} from 'react-bootstrap' import {Route, Link, Switch} from 'react-router-dom' import {} from 'react-bootstrap' import Data from './data.js' import Detail from './Detail'; import a..
Coding Apple, React 강좌 내용 정리.14 - Ajax in React Ajax (Asynchronous JavaScript and XML) 서버에 새로고침없이 요청을 할 수 있게 해준다 서버? 누군가 페이지 요청을 하면 페이지를 전송해주는 프로그램 요청? 여러 종류가 있으며 GET : 특정 페이지 / 자료읽기 등 범용적. 주소에 값을 붙여서 보내는 것들 POST : 주소에 값을 붙이지 않고, 암호같은 중요 정보 전달할 때 사용 GET / POST 요청 할 때마다 항상 새로 고침됨. ajax를 쓰면, 새로 고침없이 내용 수정 등이 가능하다. jQuery 설치해서, $.ajax() 사용 axios 설치해서 axios.get() 사용 일반 자바스크립트 이용해서 fetch() 사용 이 강의는 2번 axios 설치해서 사용하기로 설치 : npm install axios { axio..
Coding Apple, React 강좌 내용 정리.13 - useEffect 훅(hook) useEffect 훅 import React, {useState, useEffect } from "react" 컴포넌트가 mount, update 될때 특정코드 실행할 수 있다 useEffect(() => { console.log("11111"); }); ex) 3초뒤에 alert창을 안 보이게 하는 걸 만들고자 할 때 1. UI 보이고/안보이고하는 상태를 state로 저장 let [alert, alert변경] = useState(true); 2. 조건식으로 state가 true일때만 보여줌 { alert === true ? 재고가 얼마 남지 않았습니다. : null } 3. useEffect 내용 추가 setTimeout 함수를 이용해서, 2초뒤에 useState(false)를 실행한다. useEffe..
Coding Apple, React 강좌 내용 정리.12 - styled-components styled-components component가 많아지면 css도 관리가 어려워짐 (css in js) 동일한 이름의 class를 넣는다던지 등 먼저 설치해보기 npm install styled-components ... import styled from 'styled-components' 컴포넌트에 직접 스타일넣어서 스타일링하기 className 작명 필요없음 // css를 미리 입려놓은 컴포넌트? let 박스 = styled.div` padding : 20px; border-style: ridge; `; let 제목 = styled.h4` font-size: 25px; font-weight: 800; `; --- 상세페이지 적용 화면 호불호가 갈린다고 한다. 어차피 선택 사항이다. props 를 ..
Coding Apple, React 강좌 내용 정리.11 - 쇼핑몰 비슷하게 만들어 보기 4.Link, Switch, history , URL parameter 저번 내용들 기본 소스 내용 관련 import / export , 외부데이터 Router.1 Router : Link, Switch, history 상세페이지를 컴포넌트로 만들어보기 (Detail.js) import React, {useState} from "react" function Detail() { return ( 상품명 상품 설명 120000원 주문하기 ) } export default Detail; 이 부분을 다른 파일로 옮긴 후 import 해보기 컴포넌트 파일 만들 때는 import React 해야 한다. import Detail from './Detail'; ... 페이지 이동하는 버튼만들기 Navbar의 Home / Detail Link만들기 Home >> Home Detail >> D..
Coding Apple, React 강좌 내용 정리.10 - 쇼핑몰 비슷하게 만들어 보기.3 : router router (routing) : 페이지 나누기. 분기 (라우팅) 'react-router-dom' 라이브러리를 사용한다. 터미널에서 npm install react-router-dom 명령어를 넣어서 설치한다 router 설정 index.js 파일에서 import {BrowserRouter} from 'react-router-dom' --- ReactDOM.render( // App을 감싼다 , document.getElementById('root') ); [ HashRouter ] 를 쓴다면. 그러면 #/Routing으로 표시할 수도 있다. (BrowserRouter는 # 가 없다) 라우팅을 안전할수있게 도와줄 수 있다. Browser router : 라우팅을 리액트가 아니라 서버에게 요청할 수도 있..
Coding Apple, React 강좌 내용 정리.9 - 쇼핑몰 비슷하게 만들어 보기.2 - import / export import / export 전 강의 내용에 이어서 진행 (링크) 외부의 데이터 (data.js / export) -> import해서 사용하는 정보 데이터 만들기 - src 폴더에 파일 생성 (data.js) 후 export default 적는다 // data.js 내용 export default [ { id : 1, title : "White and Black", content : "Born in Newyork" , price : 120000 }, { id : 2, title : "Red Knit", content : "Born in Seoul" , price : 110000 }, { id : 3, title : "Back", content : "Born in Paris" , price : 10000..
Coding Apple, React 강좌 내용 정리.9 - 쇼핑몰 비슷하게 만들어 보기.1 쇼핑몰 (비슷하게 만들어보기) 먼저 프로젝트를 새로 만들어야할텐데, 그 내용은 저번 강좌내용에서 확인하자. React 강좌 내용 정리. 1 - 개발환경 구성, 설치 프로젝트 구성 Bootstrap 이용해보기 (React bootstrap - Getting Started) web 개발할 때 필요한 / 사용하는 여러 기능들 (Button, Dropdown 등 등) 을 만들어둔 라이브러리라 생각하면 될듯 일반 bootstrap도 있지만 react bootstrap을 이용해보기로 한다. 설치, 사용법은 React bootstrap 사이트에서 자세히 알아보자. 설치 터미널에 가서 npm으로 설치 (일단 강좌가 4 버전인것같아서, 나도 4버전으로 npm install react-bootstrap bootstrap@..
반응형

티스토리툴바