2021년 4월 29일 코드스테이츠 DAY-25 (Movie app 제작 ERROR 해결로 얻은(?) 지식과 Twittler with "React"에서 이 지식을 활용)

2021년 4월 28일 코드스테이츠 DAY-24 (React 예습 및 Movie app 제작 중 ERROR... feat.니꼬)

Movie app 제작 ERROR 해결로 얻은 지식 : React 기초 

 

결론은 무엇이었냐하면

 

 

Movie Component의 매개변수에 { }중괄호가 빠져있었던 것 

 

분명히 니꼬센세의 강의를 들으며 받아적었고 심지어 어제 게시글에 이것에 대한 개념을 받아적었음에도

 

이 부분을 발견하지 못하여 한참을 헤매었다.

 

다시한번 상기해 보자.

 

이전 글에는 

 

<Food name= "kimchi"/>란 Food component에 kimchi라는 value로 prop name을 줬다는 것을 의미

 

위와 같이 적었었는데 조금 더 살을 붙여서 재정의 해보겠다.

 

Food component가 있고 이 Food Component를 다른 Component에서 사용할 때 즉,
다른 Component는 부모 Component이고 Food Component는 자식 Component인 환경에서
<Food name = "kimchi" />라고 적어주는 것은 부모 Component가 자식 Component인 Food Component에 kimchi라는 Value 즉 정보를 전달하는 것이고 이는 곧 전달받은 Value로 return값을 변경한 Food Component가 부모 Component에서 확인될 수 있음을 의미한다. 

function App(){
  return(
  <div>
    <Food name = "kimchi"/>
  </div>
  )
}

function Food({name}){
  return <h1> I like {name} </h1>
}

위 같은 환경에서 Food Component는 name으로 kimchi를 가져오게 되고 

이에 chrome의 개발자도구를 켜서 elements를 보면 아래와 같이 되어있음을 알 수 있을것이다. 

  <div>
    <h1> I like kimchi </h1>
  </div>

 

위 점이 매우매우매우매우 중요함을 오늘 뼈저리게 느끼게 되었다.

 

왜냐하면 이 애로사항을 React로 Twittler를 구현하는 sprint중에 또 마주했기 때문이다. 

 

물론 상황은 Movie app보다 더 복잡했지만 말이다. 

 

 

Twittler with "React"에서 이 지식을 활용 

 

상황

Sidebar Component에 있는 알림 font를 클릭하면 Notification Component가 나오는 동시에 Tweets Component는 사라지고 Sidebar Component에 있는 메시지 font를 클릭하면 Tweets Component는 나타나는 동시에 Sidebar Component는 사라지는 기능을 구현하는 것

해결방법

React의 useState Hook을 사용하면 state변수와 해당 변수를 갱신할 수 있는 set함수가 선언되는데 이 중에 set함수를 App Component에서 Sidebar Component로 전달하여 클릭하는 font에 따라 설정해준다. 

const App = () => {
  const [curPage, setPage] = useState(0); //useState 선언

  return (
    <div className="App">
      <main>
        <Sidebar setPage={setPage} /> 
        <Features curPage={curPage} /> 
      </main>
    </div>
  );
};

-----------------------------------------------------------------------------------------------

const Sidebar = (props) => {
  return (
    <section className="sidebar">
      <button onClick={() => props.setPage(0)}>
        <i className="far fa-comment-dots"></i>
      </button>
      <button onClick={() => props.setPage(1)}>
        <i className="far fa-bell"></i>
      </button>
    </section>
  );
};

그리고 클릭에 의해 결정되는 set 함수에 의해 state 변수 삼항연산자로 어떤 Component를 출력할 지 정해준다.

const Features = (props) => {
  return props.curPage ? ( //set함수뒤의 ()안에 숫자가 1이면 true
    <section className="features">
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">Notification</div>
      </div>
      <Notifications />
      <Footer />
    </section>
  ) : (
    //set함수뒤의 ()안에 숫자가 0이면 false
    <section className="features">
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile"></div>
          <Counter />
        </div>
      </div>
      <Tweets />
      <Footer />
    </section>
  );
};

 

해설 및 활용방안

useState Hook은 페이지전환에는 적합해 보이지않는다. 페이지 전환에는 Route가 활용되어야할 것 같다. 

 

 

React 첫 sprint 후기

 

리액트 말만 들었지 처음으로 써봤는데, 니꼬센세의 강의를 들을때는 어어어하고 이해된다 된다하고 넘어갔었으나 sprint 진행 시 내가 직접 로직을 짜야한다 생각하니 어떻게 해야하나 막막했다. 하지만 일단 예습할 때 들었던 부분들을 대입해보면서 sprint를 하나씩 해결했고 Bare Minimum Requirement는 완수를 해냈다. 

 

하지만 첫 React Chapter에서는 다루지 않은 advanced과제를 해결하기 위한 지식들을 찾는 것은 생각보다 어려웠고 전에 페어를 했던 분께 도움을 얻었다. 그분은 로직에 대하여 본인만의 생각이 있으셨고 그저 따라하기 급급한 나와 다른것 같았다. 

 

모두가 같은 언어를 처음 접했을텐데 왜 그렇게 허둥지둥 했을까? 예습을 했었음에도 왜 부분부분을 놓쳤을까? 마음이 많이 조급했었나 보다. 두번째 보고 세번째 보니까 이제 눈에 익기 시작한다. 마음이 편안해야 머릿속에 지식이 쌓일수있다. 이해력이 빠르고 적용이 빠른 사람은 얼마든지 많다. 세상에!! 얼마든지 많다!!! 정말 같은 기수내에서도 벌써 훌륭한 분들이 너무 많다!!! 하지만 오래도록 꾸준히 한다면 다 제낄수 있다. 아 물론 천재는 제외ㅋㅋㅋ 천재도 언젠가는 넘길수 있지 않을까? 마음을 편하게 먹겠지만 열심히를 버리지는 않으리라.  

 

또한 다시 마음에 새기는 것은 기초가 제일이다. 정말 기초가 튼튼해야 멀리 갈 수 있다.