[포트폴리안][React] 메인페이지 개발과정

컴포넌트에 이벤트리스너를 달면 안되는걸까

기술 태그를 선택하기 위해 버튼 한개를 만들어주는 컴포넌트를 만들었고 기술명마다 컴포넌트를 호출해서 태그버튼을 생성해준다.
더보기버튼도 같은 컴포넌트로 만들었는데 더보기 버튼을 클릭했을 때 모든 태그를 한번에 보여주고싶다. 그게 잘 안된다.

모집공고 카드 다 만들고 다시 해봐야지

하루 쉬면서 생각해봤는데 '더보기'라는 텍스트가 있을 때 말고는 버튼을 만드는 컴포넌트에서 버튼 하나하나에 이벤트를 넣어주면 될 것 같다.

태그 버튼을 클릭할 때 마다 모든 버튼의 상태를 체크하고 활성화 된 버튼을 담는 리스트를 만들어야할 것 같다. 일단 메인의 모든 화면 레이아웃을 잡은 뒤 얼른 해결해야겠다.

리듀서를 사용하자

모집공고 카드를 만드는 컴포넌트를 따로 만들어줬더니 모집공고카드의 상태변경(북마크 여부와 같은..) 을 다루기가 까다로워졌다.
useState훅을 사용해서 임시로 모집공고 리스트를 생성했는데 스테이트를 변경하는 함수를 자식컴포넌트에 어떻게 전달해야할지 고민해보다가 리듀서를 떠올렸다.

일단 기술과 기술에 맞는 색상을 리덕스로 선언해주었기 때문에 리듀서는 두개가 된다. (유저 정보를 리덕스로 주고받아야하기 때문에 언젠가 리듀서는 또 늘어날듯 -,-)

index.js

import {Provider} from 'react-redux';
import { combineReducers, createStore } from 'redux';

let stackList = [
  {name: 'Front-end', color: '#AACFF2'},
  {name: 'Back-end', color: '#FFE58A'},
  {name: 'Design', color: '#FBE1F8'},
  {name: 'Spring', color: '#B0FFB4'},
  {name: 'Django', color: '#93C59B'},
  {name: 'Flask', color: '#ACACB4'},
  {name: 'Node.js', color: '#D5F6C1'},
  {name: 'React', color: '#D0FDFD'},
  {name: 'Vue', color: '#B4E8D2'},
  {name: 'Angular', color: '#ECA0A0'},
  {name: 'Android', color: '#AFF2AA'},
  {name: 'iOS', color: '#FFBBB7'},
  {name: 'Kotlin', color: '#FBCDB9'},
  {name: 'Swift', color: '#FFDEB7'},
  {name: 'Python', color: '#C0CCF8'},
  {name: 'Java', color: '#F4D8D8'},
  {name: 'Javascript', color: '#FAFC9F'},
  {name: 'Typescript', color: '#C9E3FB'},
  {name: 'HTML/CSS', color: '#EDE4FF'},
  {name: 'Go', color: '#C1EDF6'},
  {name: 'C/C++', color: '#DEE7FE'},
  {name: 'C#', color: '#CAB7FF'},
  {name: 'Firebase', color: '#FFEDAE'},
  {name: 'AWS', color: '#F8C488'},
  {name: 'GCP', color: '#F9E686'},
  {name: 'Git', color: '#C1D2ED'},
  {name: 'Figma', color: '#C1B7FF'},
  {name: 'Sketch', color: '#FFF9C3'},
  {name: 'AdobeXD', color: '#FFB7F8'},
  {name: 'Photoshop', color: '#C9E3FB'},
  {name: 'illustrator', color: '#CFC3AC'},
  {name: 'ect', color: '#5C5C5C'},
]


let recruitList = [
  {
    projectIdx: 0,
    title: '리액트로 어쩌구',
    stackList: ['Front-end', 'Back-end', 'React'],
    description: '리액트를 이용한 카카오 로그인 구현요',
    capacity: 4,
    view: 123,
    bookMark: false,
    status: 0,
  },
  {
    projectIdx: 1,
    title: '리액트로 저쩌구',
    stackList: ['Front-end', 'React', 'Spring'],
    description: '리액트를 이용한 구글 로그인 구현요',
    capacity: 4,
    view: 123,
    bookMark: true,
    status: 0,
  },
    ]

function reducer() {
  return stackList
}

function reducer2(state = recruitList, Action) {
  if (Action.type === 'bookMark') {
    let idx = state.findIndex( (a)=> {return a.projectIdx === Action.data.id})

    let copy = [...state];
    copy[idx].bookMark = !copy[idx].bookMark
    return copy;
  }
  return state;
}

let store = createStore( combineReducers({reducer, reducer2}));

index.js에 이런 식으로 리듀서를 만들어줬다.
데이터가 담기는 변수는 다른 파일에서 선언해준 뒤 호출해오고싶다. 이것도 우선 모집공고 카드 완성한 뒤 수정해줘야겠다.

프로젝트의 상태에 따라 버튼의 클래스명 다르게 부여하기

프로젝트의 상태가 모집중인지 진행중인지 종료되었는지에 따라서 모집공고 카드를 보여주는 방법이 달라진다.

상태에 따라 다른 클래스명을 부여해서 스타일시트에서 다르게 설정해주려고 한다.
더 좋은 방법이 있는지는 일단 이번주 목표치 끝내고 찾아보기