React 컴포넌트 만들기

1. 컴포넌트를 만들 js파일을 만든다

• 맨앞글자는 대문자로
• 같은이름의 폴더를 만들고 그 안에 js, scss을 같이 만든다
  

2. 기본형식

const 컴포넌트이름 = ( {사용할거1, 사용할거2, ...}) ) => {
return (
 
 2-1 컴포넌트로 만들고 싶은 html형식을 넣어준다

 2-2 {사용할거1} {사용할거2} ...
 내용을 바꿔가면서 쓰고 싶은애들을 {중괄호}안에 넣어서 html과 섞어서 적는다
 (맨위에 괄호만에 선언해준애들이다)
 

  );
};

• 컴포넌드의 이름은 js의 이름과 같게 적어주고, className도 똑같이 짓는다
  

3. 컴포넌트를 쓰고 싶은 js로 들어가서 <컴포넌트명 /> 안에 사용할거1 ="" 또는 {}의 형태로 넣어준다

3-1. 사용할거 = 텍스트일때
""(쌍따옴표)안에 적는다
사용할거1 = " 텍스트 블라블라 하고 싶은거 적기 "

• 컴포넌트 이름 = AdCard

• topTitle, title, description, plusInfo = 사용할애 1,2,3,4

• 결과
  
  

텍스트만 바꾸고 같은 구조를 반복해서 사용할 수 있다!!!

번외 ) 3-2. 컴포넌트안에 컴포넌트넣기
{중괄호}안에 적는다
<컴포넌트2 이름 컴포넌트2의사용할애1={ 컴포넌트1의 사용할애1 }

1,2는 임의적으로 넣은 숫자고 그냥 넣고 싶은 값을 넣으면 된다

• 컴포넌트2(컴포넌트1에 심어주고 싶은애) = 위의 useALink
• 사용할애1 = 위의 text

-컴포넌트 1의 사용할애1 = {plusInfo}

결과: 메인창에 사용할 컴포넌트1(AdCard.js)에 컴포넌트2(UseALink)를 심어주었다

<컴포넌트2 이름 컴포넌트2의사용할애1={ 컴포넌트1의 사용할애1 }
는
<UseALink text={plusInfo} />

컴포넌트에 이미지넣기

컴포넌트에 이미지url을 넣고 싶으면 img src ={사용할거1}로 넣어준다

전 :<div className="itemPhoto">{itemPhoto}</div>
후: <img className="itemPhoto" src={itemUrl} alt="itemUrl" />

컴포넌트에 테마 여러개주기

하나의 컴포넌트에 css는 선택에 따라 두가지를 주고싶을때

1. 사용할거1로 테마로 쓸거를 넣어준다

{사용할거1, 사용할거2}
{ theme = 'white', text }
여기서 theme='white'면 white가 기본으로 적용된다

컴포넌트 JS <UseALink.js>

import React from 'react';
import './UseALink.scss';

const UseALink = ({ theme = 'white', text }) => {
  return (
    <div className={`useALink ${theme}`}>
      <a className="plusButton" href="/">
        {text}
      </a>
    </div>
  );
};

className에 백틱을 써서 theme의 기능을 넣어준다

<div className={`useALink ${theme}`}> 이부분

2. 컴포넌트 scss에 쓰고 싶은 두가지버전의 테마를 만든다

.div명.쓰고싶은verson명 (white, dark)

컴포넌트 scss <UseALink.scss>

.useALink.white {
  @include goToSite(black, #333333);

  &:hover {
    border-color: #000;
    background-color: #333333;
    color: #fff;
  }
}

.useALink.dark {
  @include goToSite(white, white);

  &:hover {
    border-color: white;
    background-color: white;
    color: black;
  }
}

3. 본격적으로 이 기능을 써줄곳에 사용하고 싶은 버전으로 쓴다

theme=""(따옴표)안에 쓰고싶은 버전을 적어준다

 <UseALink theme="dark" text="향수 보기" />