React shop pj Redux 230930

혜빈·2023년 9월 30일

REACT 보충개념

목록 보기

17/48

버튼 누르면 state에 상품 추가

reducer에 새로운 수정함수 하나를 추가해주면 됨
그런데, 위와 같은 코드는 id가 2번인 상품 하나만 추가되는 코드
여러개를 추가하고 싶다면? -> payload 활용!

-> payload활용한 수정함수 만들기

-> export

-> 사용할 파일에 가서 import (이 실습에서는 Detail.js파일)

-> dispatch도 필요하니까 import

-> dispatch 선언

-> 사용하기

이런식으로 사용하면 원하는 object 데이터들을 넣을 수 있음

상세 페이지마다 다른 상품 추가하고 싶으면?

addItem()안에
{id: 현재페이지에 있는id, name: 현재페이지에 있는 상품 제목, count: 현재 페이지에 있는 상품 count} 를 넣어주면 됨

리액트에서 자주 쓰는 if문 작성패턴 5개

1. 컴포넌트 안에서 쓰는 if/else

function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } else {
    return null;
  }
}

function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } 
  return null;
}

이렇게 'else { ' 생략 가능

2. JSX안에서 쓰는 삼항연산자 (ternary operator)

==> 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
}

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : ( 2 === 2 
            ? <p>안녕</p> 
            : <p>반갑</p> 
          )
      }
    </div>
  )
}

삼항연산자는 중첩사용도 가능하지만, 복잡해서 return문 밖에서 if else쓰고 그 결과를 변수로 저장해놓고 변수를 삼항연산자에 집어넣어 사용하는 방식을 추천

3. && 연산자로 if 역할 대신하기

*** 자바스크립트 && 연산자

true && false; // false
true && true; // true

'왼쪽 오른쪽 둘 다 true면 전체를 true로 바꿔주세요'

true && '안녕'; // 안녕
false && '안녕'; // false
true && false && '안녕'; // false

'자바스크립트는 &&로 연결된 값들 중에 처음 등장하는 false값을 찾아주고 그게 아니면 마지막 값을 넘겨준다'

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 

function Component() {
  return (
    <div>
      { 1 === 1 && <p>참이면 보여줄 HTML</p> }
    </div>
  )
}

"만약에 이 변수가 참이면
를 이 자리에 반환하고 참이 아니면 null 반환"
위 아래 코드는 같은 코드인데, 더 간결하게 사용하려면 아래코드 사용하기

4. switch / case 조건문

function Component2(){
  var user = 'seller';
  if (user === 'seller'){
    return <h4>판매자 로그인</h4>
  } else if (user === 'customer'){
    return <h4>구매자 로그인</h4>
  } else {
    return <h4>그냥 로그인</h4>
  }
}

if문을 연달아 여러개 써야되는 상황에 switch 문법 사용하면 더 간결함

function Component2(){
  var user = 'seller';
  switch (user){
    case 'seller' :
      return <h4>판매자 로그인</h4>
    case 'customer' :
      return <h4>구매자 로그인</h4>
    default : 
      return <h4>그냥 로그인</h4>
  }
}

switch (검사할변수){} 작성
그 안에 case 검사할변수가이거랑일치하냐 : 를 넣어줌
그래서 이게 일치하면 case : 밑에 있는 코드를 실행
default : 는 그냥 맨 마지막에 쓰는 else문과 동일함

장점 : if문 연달아쓸 때 코드가 약간 줄어들 수 있음
단점 : 조건식란에서 변수하나만 검사할 수 있음

5. object/array 자료형 응용

경우에 따라 다른 html 태그 보여주고 싶은 경우,
if문 여러개/ 삼항연산자 대신 작성할 수 있는 방법

현재 state가 info면

상품정보

현재 state가 shipping이면

배송정보

현재 state가 refund면

환불약관

보여주고 싶은 경우

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        { 
           info : <p>상품정보</p>,
           shipping : <p>배송관련</p>,
           refund : <p>환불약관</p>
        }[현재상태]
      }

    </div>
  )
}

자바스립트 object 자료형에 보여주고 싶은 HTML 담기
Object{ } 뒤에 [ ]대괄호 붙여서 'key값이 현재상태인 자료를 뽑겠습니다'라고 써놓기

var 탭UI = { 
  info : <p>상품정보</p>,
  shipping : <p>배송관련</p>,
  refund : <p>환불약관</p>
}

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        탭UI[현재상태]
      }
    </div>
  )
}