도리쓰에러쓰

저번 게시물에 이어서 페이지를 나누는 React Router를 작성해보겠습니다. (저번 게시물 코드 참고) [React] 반복문(map())을 이용하여 컴포넌트(Component) 반복 출력하기 지난 게시물을 통해 App.js로 가져온 데이터를 이용해 컴포넌트(Component) 안에 출력시켜 보도록 하겠습니다. 2022.01.08 - [React] - [React] Export(내보내기) 및 Import(가져오기) [React] Export(내보내기).. dori-coding.tistory.com 1. React Router란? React Router는 하나의 페이지에서 필요한 데이터만 가져오는 형태이다. 이 말은 즉슨, 페이지마다 다른 HTML 파일이 아니라 HTML 내부를 갈아치워서 다른 페이지처럼..

지난 게시물을 통해 App.js로 가져온 데이터를 이용해 컴포넌트(Component) 안에 출력시켜 보도록 하겠습니다. [React] Export(내보내기) 및 Import(가져오기) 1. Export (내보내기) 더보기 export default [변수명] 변수 2개 export 하고 싶을 때 let name = 'Kim'; let name2 = 'Park'; export { name, name2 } 2. Import(가져오기) 더보기 import [변수명] from [경로].. dori-coding.tistory.com * 다음 코드에서 데이터를 활용해 Component에 출력하겠습니다. /* eslint-disable */ import React, { useState } from 'react' im..

1. Export (내보내기) export default [변수명] 변수 2개 Export 하고 싶을 때 let name = 'Kim'; let name2 = 'Park'; export { name, name2 } 2. Import(가져오기) import [변수명] from [경로] 변수 2개 Import 하고 싶을 때 import { name, name2 } from './data.js'; 3. [src] - [data.js]에 있는 데이터를 [App.js]로 가져오기 * data.js에 데이터 작성하기 export default [ { id : 0, title : "Black Jacket", content : "Born in Paris", price : 6000000 }, { id : 1, title..

1. 터미널에 아래 코드 작성하기 npm install react-bootstrap bootstrap * yarn 프로그램이 있다면 아래 코드로 작성해도 무관함. yarn add react-bootstrap bootstrap 2. index.html에서 태그 안에 코드 작성하기 3. App.js에서 부트스트랩(Bootstrap) import 하기 * 중괄호{} 안에 사용할 docs 작성하기 import { Navbar } from 'react-bootstrap'; 4. 태그 사용하기 function App() { return ( Saint Laurent Home Link Action Another action Something Separated link ); }

src 폴더에 이미지를 저장하고 태그로 적용하려고 했더니 적용이 안되서 방법을 찾아봤는데, src 폴더에 저장하면 상대경로로 바로 접근할 수 없다는 것을 알게 되었습니다. 그래서 아래와 같은 방법으로 [public] 폴더 안에 'images' 폴더를 넣었더니 이미지가 적용되는 것을 확인할 수 있었습니다. public 폴더에 저장하여 상대경로로 잡기 public 폴더 안에 [images] 폴더를 생성하여 안에 이미지 파일을 넣었습니다. 태그 안에 이미지 주소를 상대경로로 잡아 작성하였습니다.

예전 Component 문법 최신 Component 문법을 사용하는게 당연히 좋지만, 예전 Component 문법을 알고는 있는게 좋을 것 같아 간단하게 작성합니다. class Profile extends React.Component { constructor(){ super(); this.state = { name : 'Kim', age : 30 } } render(){ return( 프로필입니다 저는 { this.state.name } 입니다. { this.setState({ name : 'Park'}) } }>버튼 ) } } constructor : class의 변수/초기값 저장할 때 사용 state : constructor 안에 작성 this.setState() : 값 변경할 때 사용하는 함수 on..

Props 사용하여 state 값 전달하기 function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학']); return ( ); } function Modal() { return ( 제목 날짜 상세내용 ) } 위 코드에서 App() 컴포넌트에 있는 글제목 state를 Modal 컴포넌트로, 즉 부모 컴포넌트에서 자식 컴포넌트로 state를 props를 통해 전해주도록 하겠습니다. 부모 컴포넌트에서 자식 컴포넌트로 state 전달하는 방법 1. function App() { return ( ); } 2. 자식 컴포넌트에서 props 파라미터 입력 후 사용 function Modal(props) { return ( 제목 : {..

Component 사용하여 코드 간단하게 만들기 function App() { return ( 제목 날짜 제목 날짜 ); } 위와 같은 코드처럼 반복적으로 코드를 작성해야할 때 Component를 아래와 같이 작성합니다. function List() { return ( 제목 날짜 ) } 새로운 function을 만들어 Component를 생성합니다. 관습적으로 함수명은 대문자로 시작합니다. return() 안에 있는건 태그 하나로 묶어서 그 안에서 작성해줘야 합니다. (만약 의미 없는 를 사용하고 싶지 않을 땐 Fragment를 사용합니다. - 아래 글 참고) Fragment 태그 // 방법 1 function List() { return ( 제목 날짜 ) } // 방법 2 function List() ..