Rainyjune Blog

  • 홈
  • 태그
  • 방명록

2023/03/21 2

Styled Components

CSS에 정의하는 html style을 javascript단에서 정의할 수 있도록 도와주는 library이다. 설치 터미널에서 npm install styled-components 컴포넌트 js 파일에서 import styled from 'styled-components'; 사용법 변수에 html요소를 style과 함께 정의한다. let button = styled.button` background : ${ props => props.bg }; color : ${ props => props.bg == 'blue' ? 'white' : 'black' }; padding : 10px; `; styled.HTML태그 로 정의하고 상세 style은 백틱(`) 내부에 css처럼 정의하면 된다. 이 또한 컴포넌트이..

개발/React 학습 2023.03.21

URL Parameter

일반적으로 게시판, 쇼핑몰 목록 등의 경우 각 항목에 대한 제목을 클릭한 경우 해당 하위 카테고리 url에 해당 항목에 대한 id로 페이지 url이 구성된다. 이처럼 id별로 페이지 url을 따기 위해 사용하는 것이 URL Parameter이다. // detail 카테고리에 id별 url을 route하는 경우 path에 :param_name을 지정해주면 해당 param_name으로 url이 구성된다. 위 예제에서는 /detail/id 를 호출하면 DetailPage 컴포넌트를 호출하게 된다. DetailPage 컴포넌트에서는 호출된 url parameter에 따라 요청된 정보를 보여준다. function DetailPage (props) { // useParams를 통해 URL Parameter 값을 파..

개발/React 학습 2023.03.21
이전
1
다음
더보기
프로필사진

  • 분류 전체보기 (57)
    • 개발 (42)
      • Spring Boot 학습 (6)
      • Java Script 학습 (0)
      • CSS 학습 (0)
      • React 학습 (27)
      • DevExpress (1)
      • React + Spring Boot 게시판 만들기 (5)
      • Proxmox (3)
    • Tips (2)
    • Photo (11)

Tag

경상남도수목원, setState, 내친구, meta quest 3s, 속천항, SpringBoot, a7c2, 악양생태공원, 불모산 노을전망대, react, array, PostgreSQL, 화이트 메인보드, state, Redux, Proxmox, 귀산해변, JPA, 주남저수지, 주문진메밀막국수,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2023/03   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

티스토리툴바