FACT
- 인스타그램 리액트 클론코딩
- 댓글 컴포넌트화 - 코드 카타
- strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요. 예를 들어
strs = ['start', 'stair', 'step'] return은 'st'
FEELING
- 인스타그램 클론코딩 댓글창 부분을 컴포넌트화 시켰다. 댓글 컴포넌트를 하나 만들어서 부모가 되는 main.js에서 map으로 돌리는
<li>들의 key값과, 실질적인 댓글 부분인 input의 값을 props로 넘겨주고 댓글 컴포넌트에서 한개의<li>에 key값과 댓글 input값을 받아서 뿌려주는 형식이다. 이렇게 하니 자바스크립트로createElement()를 활용해 하나하나 태그를 만들어서 했을 때보다 훨씬 간편하고 편리했고 리액트내에서도 관리하기가 수월했다. - 코드카타 부분에서 공통으로 시작되는 단어를 for문을 활용해 각 index마다 확인해보고 같으면 반환할 단어변수에 넣어주면 될 것이라고 단순하게 생각했었는데 이게 단어마다 길이도 다르고 prefix가 없는 경우도 있어서 알고리즘 짜기가 생각보다 복잡해서 힘들었다.
FINDING
- map함수 적용 시 key값을 부여해야하는 이유
FUTURE ACTION
- 스토리 부분 및 메인 페이지의 컴포넌트화
- 실질적인 백엔드와의 통신
Front-End Developer