1. main 페이지 컴포넌트

프로젝트에 들어오기 전까지, props에 대해서 잘 다루지 못했었다. props에 관한 개념도 두루뭉실했고, 왜 써야하는지도 이해가 가지 않았다. 적어도 내눈에는 별로 필요하지 않은, 번거롭다 싶은, 날 괴롭히는 존재에 불과했던 것 같다. 하지만, 직접 써보면서 props가 어떻게 쓰이는지 왜 필요한지에 대해서 좀 더 깊숙하게 이해를 할 수 있었던 것 같다. props는 정말 꼭 필요한 존재다.

Component (컴포넌트) 뭘까?

리액트에서는 '컴포넌트'라는 구성단위로 프론트 개발을 한다.
컴포넌트는 구성요소라는 뜻인데, 화면을 구성하는 요소들을 각각 만들고 그것을 하나로 합쳐 하나의 페이지가 되는 형식이다.
이 컴포넌트 또한 작게 쪼개서, 작은 부분을 합쳐 하나의 컴포넌트로 만들 수 있다.
하나의 컴포넌트 안에서 쪼개고 쪼개기를 반복할 수 있다. 큰 요소 안에 작은 요소가 있으니 부모-자식의 관계가 형성될 수 있다.

" Props " 뭔데 대체 ?

리액트 컴포넌트에서 다루는 데이터는 두개(props 와 state)로 나뉜다.
요약하여 설명하면, props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다.
자식 컴포넌트에서는 부모 컴포넌트로부터 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 없다.
반면에 state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다.

✔ props

props(property의 약자)는 부모에게 받아온 데이터이다. 리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없다. 따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에있는 값을 꺼내서 사용할수만 있다.

    <Section 
    img="/images/mountain.png"
    span='"요즈음 많이 지치고 피곤하시나요 ?"'
    p="태백산맥의 정기를 이어받은 축복의 찻잎이 준비 되어있습니다 !"
    />  
      
    <Section 
    img="/images/jeju.png"
    span='"내 거친 생각과 불안한 눈빛과 그걸 지켜보는 하르방"'
    p="하르방's Must Have I.T.E.M !"
    />

메인 페이지에서 반복되는 Section 부분이다. ( img , span , p 태그 부분 )이 계속 반복되는 것을 볼 수 있다.

↓↓ Section 부분이 계속 반복되기에 props로 wrap부분에 주었다. ↓↓

function Section(props) {
    return (
    <section className="section">
        <div className="inner">
            <img src={props.img} alt="themaimg" />
            <span className="propose">{props.span}</span>
            <p className="recommend">{props.p}</p>
        </div>
    </section>
);

<Wrap
    className="wrap"
    img="/images/product3.JPG"
    name="수줍은 홍티"
    price="6,000원"
    rate="4.5"
    review="3"
/>

<Wrap
      className="wrap"
      img="/images/product4.JPG"
      name="보라달빛 차"
      price="9,000원"
      rate="5.0"
      review="13"}
/>

wrap에서 반복되는 부분 (img , name, price, rate, review)

↓↓↓↓↓ 반복되는 wrap 부분을 props로 컴포넌트 시켜주면..? ↓↓↓↓↓

function Wrap(props) {
	return (
    	<div className="wrap">
        	<div className="img-box">
            	<img className="items" src={props.img} alt="items" />
            </div>
            <div className="txt-box">
            	<span className="product-name">{props.name}</span>
                <span className="product-price">{props.price}</span>
                <span className="product-detail">
                	<i className="fa fa-star" aria-hidden="true" />
                </span>
                <span className="bold">
                	<span className="bold">{props.rate}</span>{' '}
                </span>{' '}
                | 리뷰 : {props.review}
                </span>
            </div>
          </div>
    );
}

위와 같이 props를 사용한다면, 반복되는 부분인 section 부분과 wrap 부분을 한 번만 써주면 되기 때문에 번거로움과 귀찮음을 줄여준다. props는 무조건 자식만 받을 수 있다는 것을 잊지말아야 한다.

2. 로그인 페이지 -> 리액트 기능 추가 ( 유효성 검사 )

위스타그램 페이지를 코딩 했을 때, 리액트를 사용해서 만든 로그인 페이지와 똑같은 방식으로 만들었다.

로그인 조건 만족 시, 버튼 활성화&amp;amp;amp;amp;nbsp;

✔ state 이용해서 이메일과 비밀번호 value 값을 받아오기

const [loginEmail, setLoginEmail] = useState('');
const [loginPw, setLoginPw] = useState('');
const navigate = useNavigate();

function handleEmailInput(event) {
    setLoginEmail(event.target.value);
  }

function handlePwInput(event) {
    setLoginPw(event.target.value);
  }

✔ '로그인 버튼'에 삼항연산자를 이용해서 class 주기 (활성화)

<button
    className={loginValid ? 'btn-active' : 'btn-die'}
    onClick={mainCondition}
    >
    로그인
</button>