눈으로 보고 치는 눈코딩과 직접 치는 코드가 정말 정말 다르다는 것을 또 다시 느낀 한 주였습니다… 리액트 때문에 계속 멘붕이였죠! 하지만 곧 익숙해질거라 믿으며.. 저의 삽질 과정을 올려봅니다!
오류가 왜 이리 많이 생기니?
-
no-unused-vars
import 선언은 해놓고 안 쓰는 애들에 대한 경고가 뜹니다. 이럴 경우 간편하게 주석처리하거나 저 코드를 지우면 됩니다~
- Module not found
캡쳐를 다 해놓은줄 알았는데 저게 끝이네요… ㅠㅠ 저건 대부분 경로설정을 잘못해서 생긴거니까 파일의 상대경로를 잘 설정하세요! - inline-style 방식에서의 에러
이건 아마 처음에 인라인으로 태그에 스타일요소를 넣으려고 했을때 발생한 에러같은데… JSX에서는 중괄호를 두번씩 써서 인라인으로 쓸 수 있습니다! 그치만 프로답게 css파일에 스타일을 정의하는 습관을 기릅시다!
그 밖에 오타로 인한 에러가 참 많이 났었는데… 매의 눈 필수!!! 언제 한번 리액트 에러 모음집 글을 써보겠습니다~ 대부분의 오류는 주위 사람들에게 도움을 청하거나.. 구글링으로 해결했습니다!
컴포넌트 쪼개기가 너무 어려워…
처음엔 단순히 레이아웃별로 쪼갰습니다.
<>
<Top />
<Left />
<Right />
</>render함수의 return값 안에 저런식으로 넣었지만.. 컴포넌트를 쓰는 이유가 재사용성 때문인데.. 제가 일단 쪼개긴 했어도 재활용은 전혀 하지 않았기 때문에 다시 쪼개봤습니다!
사실 재사용 할만한 모양이 별로 없어서 Top Component에 속해있던 흰색 바 안의 구성요소들을 Top2nd라는 컴포넌트로 따로 빼서 Left Component와 Right Component에 이어붙여줬습니다..
이렇게 하는게 제대로 하는건진 모르겠지만.. 일단 월요일에 피드백 받기 전까지 주말까지의 저의 삽질은 여기까지!!
부모 컴포넌트에 대한 오해…
저는 그냥 <Top /><Left /><Right />가 합쳐지는 최종 컴포넌트가 부모 컴포넌트라고 생각했는데… 그게 아니였어요!!! 부모 컴포넌트는 react app에서 무조건 하나만 존재할거라 생각했는데…
그냥 props를 물려주는 쪽은 다 부모라고 할 수 있는거에요! 앞서 react 개념 정리할 때 각 컴포넌트간 데이터 교류를 무역이라고 정의 내렸는데..
그냥 그 무역이 부모와 자식간의 거래(?) 였네요 ㅋㅋㅋㅋ
부모 컴포넌트에 대해서 제대로 알고있지 못해서 props를 활용하는 부분도 어렵게 생각했는데, 한번 이해하고 나니 이제 간단한 코드는 쓸 수 있게 되었어요!
예를 들어…
Top2nd라는 위는 굵은 글씨, 아래는 얇은 글씨의 형식을 만들어주는 컴포넌트가 있습니다. 이걸 Right이라는 컴포넌트에 붙여볼겁니다.
class Top2nd extends React.Component {
render() {
return (
<div className="doorits_box">
<ul>
<li className="bold">{this.props.bold}</li>
<li className="light">{this.props.light}</li>
</ul>
</div>
);
}
}아래는 Right 컴포넌트 중 일부
<div
className="bar_wrap"
>
<Top2nd
bold="Doorits"
light={this.state.tweetBox.length}
/>
<Top2nd
bold="Followers"
light="24"
/>
<Top2nd
bold="Followings"
light="2"
/>
</div>Top2nd 컴포넌트의 bold라는 className에 넣고 싶은 글씨를 넣을 수도 있고,
아니면 state객체를 이용해서 Right안의 값을 대입하는 방법도 있습니다!
넘나 신기한 리액트의 세계~~
아직은 어렵고, 잘 안되면 화도 나지만 재미는 있으니깐! 더 발전할 수 있겠죠? XD