[1026] react - 내가 클릭한 버튼에 효과 주기 / 버튼 클릭시 원하는 컴포넌트 / react-icons 사용하기

* 컴포넌트 props 넘겨서 css 효과주기

 

styled 컴포넌트로 props값을 넘겨서 동적인 효과를 낼 수 있다!

 

 

<Sell - index.jsx>

import { StyledSell } from './sell.css'
import { useState } from 'react'
import BuyNow from './BuyNow'
import Auction from './Auction'


const Sell = ()=>{
    const [isNow,setIsNow] = useState(true);

    // 즉시구매를 선택한 경우
    const handleNow =()=>{
        setIsNow(true);
    }

    // 경매를 선택한 경우
    const handleAuc = ()=>{
        setIsNow(false);
    }
    

    return (
        <StyledSell isNow={isNow}>
            <div className="sell_section">
                <div className="select_btn">
                    <p onClick={() => handleNow()} className="select_buynow"> 즉시구매 </p>
                    <p onClick={() => handleAuc()} className="select_auc"> 경매 </p>
                </div>
                <div className="select_sell">
                    {
                        isNow ? <BuyNow /> : <Auction />
                    }
                </div>
            </div>
        </StyledSell>
    )
}

export default Sell

 

<sell.css.jsx>

.select_buynow{
    background: ${props=>props.isNow ? 'blue': 'white' };
}

.select_auc{
    background-color: ${props=>!props.isNow ? 'blue':'white' };
}

 

 

이렇게 해주면 isNow라는 props를 styled-component로 넘겨서 각각 효과를 줄 수 있음!

 

내가 이미 상태를 지정해놨기 때문에 css (styled-component) 에서도 isNow (true/ false) 값을 이용할 수 있었음.

true 이면 -> 파란색

false 이면 -> 검은색 

이런식으로

 

---

 

* component 위치 조정하기

 

component에 <div>를 씌운 다음 해당 div를 조정 한다. 

여러개의 컴포넌트를 정렬하고싶을 때에는 div로 걔네를 감싸주고 flex로 조정해주면 쉬움

 

 

<sell.jsx>

                <div className="flex_contain">
                    <div className="select_sell">
                        {
                            isNow ? <BuyNow /> : <Auction />
                        }
                    </div>
                    <div className="release_btn">
                        {/* <button className="cancel">취소</button>
                    <button className="go">NFT 발행하기</button> */}
                        <Button value="취소 하기" color="white" className="cancel" />
                        <Button value="NFT 발행하기" color="blue" className="go" ml="50" />
                    </div>
                </div>
            </div>

 

 

 

 

<sell.css.jsx>

.flex_contain{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.release_btn{
    display: flex;
}

 

 

---

 

 

* 버튼 클릭시 원하는 컴포넌트 보이기

 

-> 상태값 여러개 넣을 필요도 없었음. 왜냐면 내가 보이고 싶은 컴포넌트는 두개였으니까 그냥 상태값 하나로 

true 일땐 -> buyNow 보이게

false 일땐 -> auction 보이게 해주면 됨

 

const [isNow,setIsNow] = useState(true);

const handleNow = ()=>{
	setIsNow(true);
}

const handleAuc = ()=>{
    setIsNow(false);
}
...

<p onClick={()=> handleNow()}> 즉시구매 </p>
<p onClick={()=> handleAuc()}> 경매 </p>

<div>
{
	isNow ? <BuyNow/> : <Auction/>
}
</div>

 

 

 

---

 

* react - icons 사용하기

 

https://react-icons.github.io/react-icons

React Icons

 

 

npm install react-icons --save

 

 

 

아이콘마다 import 해 와야 하는 것이 다르다!

원하는 아이콘 페이지 맨 위에 뭘 imort 해야 하는지 나와있음.

 

{ IconName } 부분에 원하는 아이콘 이름 넣으면 되고

홈페이지에서 아이콘 누르면 자동으로 이름 복사하기가 됨!

 

해당 컴포넌트를 원하는곳에 넣어서 사용 하면 된다.

 

이런식으로 사이즈나 색도 직접 줄 수가 있고, class명을 부여해서 직접 css 작업도 가능하다고 한다.