[리액트 React] 투두리스트 TodoList, Jsx문법, 컴포넌트

 return (
    <div className="todo-list-div">
      <h1>🔥Working</h1>
      <div className="workingList-div">
        {/* isDone의 상태에 따라 todo가 반환된다. */}
        {list
          .filter((item) => !item.isDone)
          .map((item) => {
            return (
              // 필터링된 div 컴포넌트와 연결
              <TodoItem
                item={item}
                removeBtn={removeBtn}
                completedBtn={completedBtn}
              />
            );
          })}
      </div>
      <h1>🌈Done!</h1>
      <div className="doneList-div">
        {list
          .filter(function (item) {
            return item.isDone;
          })
          .map(function (item) {
            return (
              // 필터링된 div와 연결
              <TodoItem
                item={item}
                removeBtn={removeBtn}
                completedBtn={completedBtn}
              />
            );
          })}
      </div>
    </div>
  );

 

 {/** 삼항연산자를 이용해 isDone 상태에 따라 버튼이 보인다.  */}
          {item.isDone ? 
           ( <button onClick={() => completedBtn(item.id)} className="cancel-btn">취소</button>)
           :
           (<button onClick={() => completedBtn(item.id)} className="completed-btn" >완료</button>)}

 

리액트 입문 과제 끝

아직 용어도 생소하고 jsx를 완벽하게 사용할 수는 없지만 이번 과제는 비교적 어렵지 않았다.

물론 컴포넌트 분리나 기타 부분에서 튜터님의 도움을 받긴 했지만...

제일 어려웠던 부분은 isDone과 Working의 로직이 버튼 빼고 완전히 똑같아서 하나로 합치고 싶었다.

하지만 이미 isDone를 기준으로 필터링된 배열을 뿌려주기 때문에 어떤 식으로 조건을 줘야 하는지 헤매다가 과제 제출 시간이 돼서 나중에 강의를 다시 보고 고쳐야겠다 싶었는데 튜터님이 아주 간단하게 이 고민을 해결해 주셨다.

"컴포넌트 분리" 이게 핵심이었다. 반복되는 로직을 파일을 새로 만들어 새로운 컴포넌트로 만들어준다

원래 컴포넌트에서 조건에 따라 필터링이 되고, 필터링된 값에 맞춰서 컴포넌트가 연결된다 그리고 버튼은 isDone 조건에 맞춰서  갈아 끼워주면 끝!

 

내가 간과했던 점 

1. 컴포넌트 분리에 미숙하여 생각하지 못했다는 것, 컴포넌트에 대한 개념이 부족한 것 같다 (컴포넌트 = 기능을 수행하는 함수, return 안에 작성되어야 함)
2. jsx문법은 버튼태크도 삼항연산자로 들어갈 수 있다는 걸 몰랐다 (다른 방법도 많았겠지만 jsx 문법이 아직 익숙하지 않은 거로)

---

JSX 문법이란?

• javascript + xml(데이터 기술 언어)가 합쳐져 자바스크립트를 확장한 문법
• 작성한 코드는 브라우저에서 실행되기 전 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다

 

• 번들링 : 사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는(압축) 행위
  번들링을 하는 이유
  파일 크기가 작아지고, 실행속도가 빨라지며, 번들링 된 웹 애플리케이션도 사용자가 임의로 조작할 수 없다

 

• 바벨 
   ES6+ 버전 이상의 자바스크립트나 JSX 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 주로 사용되는 도구

 

컴포넌트란?

• 리액트 환경에서 UI 요소를 구분할 때 사용되는 단위, 앱을 이루는 작은 조각, 퍼즐 같은 것이다 
• 데이터를 입력받아 상태에 따라 Dom을 출력한다

조금 더 쉬운 설명

• 어떤 기능을 모아서 독립적으로 사용하는 함수로, 기능의 집합같은것
• 컴포넌트 내부에는 컴포넌트에 관한 것들로만 채워야한다
• 컴포넌트 내부 함수들은 컴포넌트의 기능을 위한 메서드와 같은 것이다.
• 반복적인 함수는 컴포넌트를 분리하여 관리하고, 하나의 컴포넌트만 사용하는 함수는 내부에 선언하여 사용된다.
• 스타일의 경우, 전역으로 선언하여 다른 컴포넌트들이 접근할 수 있게하거나, 스타일을 위한 컴포넌트를 생성하여 관리하는것이 제일 효율적이다.

컴포넌트 구성요소

• props - 컴포넌트 간 데이터를 전달하기 위해 사용된다, 함수형 컴포넌트에서 매개변수와 같다
• state - 컴포넌트의 상태를 저장, 수정할 수 있는 데이터 변수와 같지만 일반 변수와는 다르게 값이 변하면 관련 있는 컴포넌트들이 리랜더링 되어 화면이 바뀐다