일상로그

오전

위코드

• 등원(8시 10분)
• 회원가입 메인 페이지

오후

개인

• 점심 : 닭볶밥, 닭가슴살

위코드

• 메인 페이지

총평

• 메인 페이지에 대한 감이 안와서 어제부터 걱정과 조바심이 들었었다. 그래서인지 꿈에서 까지 생각이 났고 오늘 평소 시간보다 2시간 빨리와서 고민을 했다. 막상 시작하자 생각했던 것보다 복잡하지 않았고 신영님이 만들어 놓은 상품 컴포넌트 들이 쉽게 레이아웃을 구현 할 수 있었다.
• 그런 상황에서 다른 팀들이 앞서가는 모습을 보니 우리가 못하고 있나 라는 생각에 괜스레 다운이 됐지만 (프로젝트를 하면 예민해진다는 이유를 조금 알겠다) 저녁 먹고 다시 회복!

막상 부딫혀보면 별 것 아닌 것들이 많기에 너무 많은 고민과 생각보다 일단 들어가자 그리고 다른팀 혹은 남들과 비교는 너무 의미없는 일 같다. 내가 할 수 있는 것에 집중하고 하나의 코드도 집중하고 생각하자

---

TIL

onChange Event 와 actionTab event 세션 정리

onChange

**이번 1차프로젝트 내가 맡은 페이지 중 하나인 회원가입 페이지에는 사용자가 입력해야 하는 input이 많았는데 처음에는 그걸 각각 input event를 걸어줬다😭

그럴 필요없이 아래와 같이 input의 이름을 지정 해주면 값 에 접근할 수 있다.👍

  handleInput = (e) => {
    if (e.target.id === "email") {
      this.setState({ userEmail: e.target.value });
    } else if (e.target.id === "pw") {
      this.setState({ userPw: e.target.value });
    } else if (e.target.id === "rePw") {
      this.setState({ userRePw: e.target.value });
    } else if (e.target.id === "name") {
      this.setState({ userName: e.target.value });
    } else if (e.target.id === "number") {
      this.setState({ userNumber: e.target.value });
    } else {
      this.setState({ userBirthDate: e.target.value });
    }

보기만 해도 정말 비효율적인 코드다 ! 이 코드와 더불어 모든 인풋태그에 위 이벤트를 걸어줬다. 하지만 오늘 세션을 통해 모든 인풋에 걸어줬던 이벤트를 아래 한 코드로 정리할 수 있다.

    this.setState({ [e.target.name]: e.target.value });

위와 같이 handleInput 함수를 정의해주고 아래와 같이 각 인풋태그에는 각각의 name을 설정해준다

   <div className="fieldRow">
                  <input
                    className="infoBox"
                    name="userEmail"
                    type="email"
                    placeholder="이메일 형태로 입력해주세요.(필수)"
                    id="email"

actionTab event

여러 메뉴 탭이 있을때 클릭 했을때마다 해당하는 페이지를 보여주기 위한 기능이다.
먼저 보여주고자 하는 component를 import 한다.
import First from './components/First';
import Second from './components/Second';
import Third from './components/Third';
변수에 객체를 만들어 주고 key와 value형태로 만들어 주고, 클릭할 때 넘겨주는 인자(숫자)와 key 값을 매칭 시켜 원하는 화면을 출력하면 된다.
const obj = {
  0: <First />,
  1: <Second />,
  2: <Third />,
};

state에 시작하는 activeTab 값을 0으로 지정해 준다.
export default class App extends Component {
  state = {
    activeTab: 0,
  };
아래 리스트에서 클릭 이벤트가 일어날때마다, 각 매칭에 맞는 숫자를 인자로 전달 해 주고, 인자를 id로 받아, 클릭될 때 마다 해당 숫자로 id 값을 업데이트 해준다.
  handleClick = (id) => {
    this.setState({ activeTab: id });
  };
클릭 할 때 보여줘야 하는 Component 값을 객체에 접근하는 식으로 표현해 놓아서 {obj[this.state.activeTab]} id 값으로 넘겨주는 숫자를 가진 key 값의 value인 각각의 component를 출력하도록 설정 해놓으면 된다!
  render() {
    return (
      <div className='wrapper'>
        <ul className='tabs'>
          <li className = {this.state.activeTab===0? "active" : "" } onClick={() => this.handleClick(0)}>First</li>
          <li className = {this.state.activeTab===1? "active" : "" } onClick={() => this.handleClick(1)}>Second</li>
          <li className = {this.state.activeTab===2? "active" : "" } onClick={() => this.handleClick(2)}>Third</li>
        </ul>
        <div className='contents'>{obj[this.state.activeTab]}</div>
      </div>
    );
  }
}