react-diary-full

public 파일에서 이미지 가져오기

이미지 파일 위치 예시

<img src='/assets/arrow-next.png' />

App.js의 상대 경로 X

index.html의 상대 경로 O

 

getTime()메서드

: 밀리초 반환

 

헤더, 버튼 등 공통적으로 많이 사용되는 부분 => 공용 컴포넌트로 제작

 

버튼 예시

// 버튼 모아놓은 component(MyButton)

// type, text, onClick => props

const MyButton = ({type, text, onClick}) => {

    return (
        <div className="Mybutton">
            <button className={type} onClick={onClick}> // onClick: 이벤트 {onClick}: props
                {text}
            </button>
        </div>
    )
};

export default MyButton;

// App component

import MyButton from ___;

const onClick01 = (e) => {
    console.log('클릭1');
}
const onClick02 = (e) => {
    console.log('클릭2');
}
const onClick03 = (e) => {
    console.log('클릭3');
}

function App() {
	return (
    	<div>
        	<MyButton text={'긍정'} onClick={onClick01}} type={'positive'} />
            <MyButton text={'부정'} onClick={onClick02} type={'negative'} />
            <MyButton text={'기본'} onClick={onClick03} />
        </div>
    )
}

 

여기서 text : 기본 버튼에는 type이 없음

이대로 써도 상관 없지만 혹시나 type prop이 없을 시 오류가 발생할 수 있기 때문에

MyButton 컴포넌트에 입력 가능

Mybutton.defaultProps = {
	type : 'default'
}

 

 

상위 컴포넌트에서 props 값이 제대로 입력 받지 못했을 때 디폴드 값으로 props 처리하겠다는 뜻임

 

만약 공통 class를 사용하고 싶다면

<div className="Mybutton">
    <button className={`MyBtn ${type}`} onClick={onClick}>
    	{text}
	</button>
</div>

여기서 MyBtn은 공통 클래스

type props는 개별 클래스로 사용 가능