본문 바로가기

728x90

React 학습

(7)

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 강좌 내용 정리.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 강좌 내용 정리.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@..

Coding Apple, React 강좌 내용 정리.3 - state React에서 state를 쓰는 이유, 방법을 알아보기 데이터를, 변수 (let , var)에 넣거나 state (useState() 이용해서) 에 넣거나 state 만드는 방법 1. import React, {useState} from 'react' - React에 있는 함수를 쓰겠다. useState를 쓰기 위해서 2. useState('저장할 값') * ES6 destructuring 문법 중에서 이 2개 데이터를 변수에 담고 싶으면 var [a, b] = [10, 100]; // var a = 10 , var b = 100 import React, {useState} from 'react' import logo from './logo.svg'; import './App.css'; function ..

Coding Apple, React 강좌 내용 정리.2- JSX 기본 문법 JSX? src / App.js의 내용을 확인하자 기본적인 javascript 함수가 나오는데 return 함수 내부는 일상적인 html 코드처럼 작성을 하되 특정 문법에 맞춰서 코딩을 한다 이 부분이 JSX. html 의 class를 쓸 수가 없고, className을 사용한다 스타일링 (css ) - import 된 App.css 파일에서 관리를 하게 된다 실제 표시될 부분과 css (스타일링)은 별도로 구분해서 코딩한다. 확인하기 : black-nav라는 이름으로 새로운 div를 만들고, 그에 따른 스타일링을 App.css에 추가한다. 일단 평상시 쓰던 html / css처럼 만든다고 생각하자. 데이터 바인딩 : 왜 리액트를 쓰고, Vuew를 쓰고 하는지에 대한 이유 * 데이터를 html에 표시하는..

이전 1 다음

티스토리툴바