HAZEL

이전 작성 글 더보기 2021.07.03 - [분류 전체보기] - [ React 01 ] React 설치 및 시작 , JSX 문법 , State 2021.07.04 - [분류 전체보기] - [ React 02 ] React Component 문법, 반복문 - Map, for, Props, input을 받아서 데이터처리, 옛날에 react 사용법 2021.07.05 - [PROGRAMMING/React] - [ React 03 ] 부트스트랩 & React 쓰기, import / export 문법, Component 화 , 반복문 map 2021.07.06 - [PROGRAMMING/React] - [ React 04 ] 라우트, Link, Switch, history ,URL 파라미터, styled-com..

이전 작성 글 더보기 2021.07.03 - [분류 전체보기] - [ React 01 ] React 설치 및 시작 , JSX 문법 , State 2021.07.04 - [분류 전체보기] - [ React 02 ] React Component 문법, 반복문 - Map, for, Props, input을 받아서 데이터처리, 옛날에 react 사용법 2021.07.05 - [분류 전체보기] - [ React 03 ] 부트스트랩 & React 쓰기, import / export 문법, Component 화 , 반복문 map 1. 라우트 초기 셋팅 법 1. 터미널에 npm install react-router-dom 설치 2. index.js 에 Router를 import 해주기 - APP에 Router 태그를 ..

1. 부트스트랩 & React 쓰기 : 부트스트랩은 css 를 편하게 해주는 아이다. React 에서 사용할 때는, 그냥 부트스트랩 홈페이지가 아닌, React 부트스트랩 홈페이지에 들어가야한다. https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 이곳에서 get start 를 누르면 사용할 수 있는 방법이 나온다. 1. terminal 창에서 , npm install react-bootstrap bootstrap@4.6.0 을 입력해준다. 2. css link 를 index.html 에 넣어준다. 3. css에서 필요..

1. Modal 창 만들기 - React Component 문법 : HTML을 한 단어로 줄여서 쓸 수 있는 방법 1) Component - Component 만드는 법 1. 함수를 만들고 이름을 짓는다. 2. 축약을 원하는 HTML을 넣는다. 3. 원하는 곳에서 을 적는다. .... ); } // 컨포넌트 만들기 function Modal(){ return( 제목 날씨 상세 내용 ) } - 컴포넌트 만들때의 주의사항. 1. 대문자로 시작해서 만든다. 소문자는 사용하지 않는다. 2. return() 안에 있는 것은 태그를 하나로 묶어야한다. 여러개의 태그가 나열되서는 안된다. - 만약 reuturn() 내부를 묶을 때 의미없는 div 를 사용하기 싫으면 를 사용한다. 3. 만드는 위치는 function ..

1. React 설치 및 시작 1 ) npx create-react-app blog vs code 의 terminal 창에 위의 코드를 입력해주면 설치가 됩니다. blog는 내가 만들고자하는 폴더 이름을 입력해주면 됩니다. 이것은 react 를 할수 있게 해주는 라이브러리가 담겨있는 것을 모두 설치할 수 있게 해주는 것입니다. 2) npm start 입력 이때, cd blog 로 blog ( 혹은 위에서 자신이 만든 폴더 ) 로 이동을 해준 다음에 npm start를 입력해주어야합니다. 그러면 crom 창이 새로 생기게 됩니다. 2. JSX 문법 : return 안에 html 같은 문법이 들어가있는 것을 의미합니다. jsx 문법의 특징 a. 태그에 class 주고싶다면, 을 입력해줌 b. 리액트에서 데이..