[개발 공부 21일차] React 입문 - 개인 과제 완료! 블록 요소와 인라인 요소

 

 

재밌지만 어려웠던 리액트 과제가 끝났다!

강의 내용에 대부분 답이 있어서 2/3 정도는 어렵지 않게 했지만 완료 버튼을 눌러서 Done이 있는 곳으로 컴포넌트를 보내줘야 하는 기능을 구현하는 게 정말 어려웠다. 식은 적었는데 어떻게 구현해야 할지 막막해하다가 어제 다른 동기 분이 특강 아닌 특강을 해주셔서 이해가 잘 되었고, 또 과제를 얼른 마칠 수 있었다.

 

 

< 목차 >

1. [React 개인과제] 완성

   1-1) 기능 구현 계획

   1-2) 구현 문제 및 해결책

   1-3) 블록 요소와 인라인 요소

   1-4) npm start가 안 됨 && 해결책

2. 금일 소감

 

 

1. [React 개인과제] 완성

 

 

위 사진처럼 완료 버튼을 눌렀을 때 Done이 있는 위치로 컴포넌트를 보내줘야 한다. 이 부분이 너무 어려워서 정말 어제 하루 내내 생각했다. 코드는 계속 에러 뜨고, 시간도 부족하게 느껴져서 계속 노심초사했다.

 

 

1-1) 기능 구현 계획

내가 생각해낸 코드 로직은 이렇다.

Done으로 보내주려면

1. [완료] 버튼을 눌렀을 때 (click 이벤트)

2. 해당 To-do의 id를 비교한다.

3. id가 동일하면 Done으로 가고, 다르면 Working에 있는다.

 

따라서 조건문과 필터 함수가 필요하겠다 싶었다.

 

 

1-2) 구현 문제 및 해결책

[삼항 연산자] 예문

 

if문을 쓰려 하다가 너무 코드가 길어질 듯하여 '삼항 연산자를 쓰면 될 듯?'이라는 생각으로 발전하였다. 하지만 계획의 3번이 문제였다. 막상 Done과 Working으로 보내려니 컴포넌트를 더 만들어야 할 것 같고 복잡해져가지고 어떻게 해야 할지 모르겠어서 고민하였다. 그러다 동기 중에 개인 과제 관련으로 특강을 해주겠다고 하는 천사 동기분이 있어 그걸 정말 4시간 동안 모여서 봤다.

 

보니까 알았다. 삼항 연산자까지 해서 정답에 거의 다 접근했는데 마지막에 Done과 Working으로 가는 계획이 잘못됐었다.

 

isDone을 false로 선언해주고 이 true일 때엔 보여주고, false일 때엔 null로 지정해서 안 보이게끔 하면 된다. 그래서 동기 분 코드를 참고해서 내 코드를 좀 수정하였다. 답을 알아도 코드 형태가 달라서 접목하는 데에 좀 시간이 걸렸다. 구현된 코드는 다음과 같다.

 

 

▼  구현된 코드

// 추가 버튼 클릭
  const clickAddButtonHandler = () => {
    alert("추가됐습니다.")
    // 1. 새로운 형태의 Todo를 만든다.
    // 2. Todo를 배열에 더한다.
    // 생성자 함수 이해하기! (맨앞 대문자로 시작) - JS문법반 5-3~5-8
    const newTodo = {
      id: todo.length + 1,
      title,
      contents: contents,
      isDone: false,
    }
    // isDone: false 확실히 이해하기!
    // set~~: [불변성] 객체 or 배열일 땐 obj처럼
    setTodo([...todo, newTodo]);
    setTitle("");
    setContents("");
  }
  
  
  =======
  
  
  // 완료 버튼 클릭
  // map이랑 spread 확실히 이해 필요
  const clickCompleteBtnHandler = (id) => {
    const temp = todo.map((card) => {
      if (card.id === id) {
        card.isDone = !card.isDone;
      }
      return card;
    });
    setTodo([...temp]);
  } 
  
 
  =======
  
  
  <div className="TodoBox-Style">
        {todo.map(function (item) {
          return !item.isDone ? (<Todo key={item.id} item={item} clickDeleteBtnHandler={clickDeleteBtnHandler} clickCompleteBtnHandler={clickCompleteBtnHandler} />) : null
        })}

        {/* <p>태그는 inline 요소라서 <p>태그 안에 <div> 넣으면 에러남*/}
      </div>
      <div><h1>&nbsp;Done!🌟</h1></div>
      <div className="TodoBox-Style">
        {todo.map(item => {
          return item.isDone ? (<Todo key={item.id} item={item} clickDeleteBtnHandler={clickDeleteBtnHandler} clickCompleteBtnHandler={clickCompleteBtnHandler} />) : null
        })}
      </div>
      <div>
      </div>
    </div>
  );
}

 

 

1-3) 블록 요소와 인라인 요소

<p> 태그 안에 <div> 태그 넣기 금지..

위 코드에도 나와있듯이 내가 <p> 태그 안에 <div>를 넣어서 에러가 발생하였다. 아니 문단 바꾸는 걸 왜 2번이나 중첩해 사용했지..? 지금은 이해가 좀 안 가지만 피곤해서 그랬었던 것 같다. 아무튼 이 에러 덕분에 <p> 태그 안에는 inline 요소만 들어가야 한다는 걸 알게 되었다. 난 <p>태그에 block 요소(div)를 넣었기 때문에 에러가 난 것이다. 그래서 관련 자료를 알아보았고, 그 내용은 다음과 같다.

 

 

 

 

▶ 블록 요소와 인라인 요소

• 블록 요소(block element): 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 갖는 요소
• 인라인 요소(inline element): 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소. 행 안의 일부분이다. 텍스트 레벨 요소라고도 한다.

 

▶ 블록 요소(block element)와 인라인 요소(inline element)의 종류

• 블록 요소: <div>, <table>, <h1>~<h6>, <p>, <form>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <pre>, <blockquote> 등
• 인라인 요소: <span>, <a>, <br>, <em>, <strong>, <input>, <label>, <img>

 

특징 및 주의점

• 블록 요소는 내부에 블럭 요소와 인라인 요소를 포함할 수 있다. 인라인 요소는 내부에 블록 요소를 포함할 수 없다.
• 블록 요소들 중에서도 '인라인 요소만 포함'할 수 있는 것들이 있다.  ⇒  <h1>~<h6>, <p>
• 인라인 요소를 css로 블럭화하여 내부에 블록 요소를 포함시킬 수도 있다. 브라우저에 보여지는데는 아무런 문제가 없지만 유효성에 어긋난다.

 

• <a>: 링크를 생성하는 요소로 href 속성을 사용하여 링크 주소를 지정한다.
• <span>: 텍스트를 그룹화하여 스타일링을 적용하거나 자바스크립트로 조작할 때 사용한다.
• <img>: 이미지를 표시하는 요소로 src 속성을 사용하여 이미지 파일의 경로를 지정한다.
• <strong>, <em>: 텍스트를 강조하는 요소로, 각각 볼드체와 이탤릭체로 표시된다.

 

 

1-4) npm start가 안 됨 && 해결책

아 왜 그래 나한테

 

위처럼 잘 해결하고 '히힛 TIL 빨리 쓰고 강의 들으러 다시 가보실까~!' 하며 완성된 모습 찍으려고 npm start 명령어를 치니 위 사진처럼 에러가 떴다.

 

... 방금까지만 해도 잘만 작동됐으면서 갑자기 왜 그러는 거야.... 빨리 TIL 쓰고 공부하려고 했는데 이것 때문에 시간이 계속 지체됐다. 절대경로 어쩌고 해서 내용 모두 주석 처리했는데도 해결되지 않았다. 모듈 파일을 삭제했다가 다시 깔아보라는 구글링 결과가 있길래 다시 깔아도 안 됐다.

 

 

 

그래서 '흠 어쩌지,,' 하다가 코드 파일을 JSX 내에 import 할 때 절대경로로 설정하도록 하게 해주는 코드 파일을 삭제해 버리니 에러가 해결되었다. 아무것도 안 만졌는데 절대경로는 갑자기 왜 문제 생기는 건디.. 쫌 억울 ㅠ...

 

완성된 모습

 

 

CSS랑 HTML은 정말 최소한으로 딱 깔끔하게만 만들었다.

그도 그럴게 JavaScript가 가장 중요하기도 하고 기능 구현이 최우선이니까 빨리 내고 부족한 자바스크립트를 공부하는 전략으로 가는 게 맞다 싶었다. 이젠 좀 자바스크립트랑 친해져야지

 

유튜브도 보고, 관련 책도 읽어보는 중이다.

직전 챕터였던 자바스크립트 강의를 한 번 더 정주행할 생각이다. 내일까지 전부 다 해야 하는데,,, 수요일 오전부터는 React 숙련 과정에 들어간다. 또 개인 과제 해야 해서 얼른 얼른 공부하지 않으면 큰일이다 ㄷㄷ

 

 

React 강의

 

 

리액트 유튜브 강의도 좀 들었다. 꽤 도움된다. 오늘내일 중으로는 다 들어야지.. 할 게 무지 많다.

 

[해당 컴포넌트에만 적용되는 CSS 만드는 방법]
1) 파일명: 컴포넌트명+module.css
2) import styles for "파일명";
3) className={stlyes.이름} (← 해서 적용)

 

 

 

2. 금일 소감

개인 과제 마친 날이라 에러와 어려웠던 점 정리하다 보니 생각보다 블로그 포스팅 시간이 길어졌다. 휴 어쩔 수 없이 오늘도 밤늦게까지 공부해야겠다. 할 게 많은데 내 예상보다 계획들이 다 딜레이되어서 어느 정도 강의 듣고 공부하다가 자야겠다. 자바스크립트가 어렵기도 한데 다른 분들에 비해 내가 공부량  input이 꽤나 부족한 듯하여 정신 차리고 잠이라도 줄여가며 호다닥 뇌에 넣을 수밖에 없다. 재밌긴 하다. 이렇게까지 공부에 몰입할 수 있는 시간이 주어지다니 행복하다 ㅎㅎ 금일 남은 시간과 내일도 파이팅!!!!!!!!! ❤️‍🔥🔥