목록TIL(Today I Learned) (53)
천진난만 코딩 스토리
오늘은 리덕스를 배웠다. 새로운 개념이라 긴장하고 좀 두려운 마음으로 리덕스를 접했다. 생각보다는 어떤 건지 감은 일찍 잡을 수 있었지만.............. 머릿속에 콕 박히지 않았다. 그래서 중간에 머리를 식힐 겸 드라이브를 하고 와서 다시 보니 조금은 이해가 되긴 했지만 확실하게 이해하기 위해서는 내일 코드를 여러 번 쳐봐야 할 것 같다. 1) 리덕스란 리덕스란 “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리)이다. 프론트엔드 개발자들은 “리덕스”를 전역 상태관리 라이브러리라고 많이 표현한다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문이다. ① useState의 불편함 컴포넌트에서 컴포넌트로 State를 보내..
오히려 리액트 훅만 볼 때 보다 최적화를 위한 훅이 더 잘 와 닿았다. 콘솔을 여러번 찍어보며 보니 더 와닿을 수 있었다. 이것도 마찬가지로 많이 사용해볼 수 있으려나 모르겠다..... 2) React Hooks - 최적화 ① 리-렌더링의 발생 조건과 최적화 ❶ 리-렌더링의 발생 조건 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props가 변경되었을 때 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 ❷ 최적화 리액트에서 리렌더링이 자주 일어난다는 것은 좋지 않다. 비용이 발생하는 것은 최대한 줄여야 하는 작업을 최적화(Optimization)이라고 한다. 최적화하는 대표적인 방법 memo(React.memo) : 컴포넌트를 캐싱 useCallback : 함수를 캐싱 useMemo..
리액트 훅....... 이게 매우 중요하다는 것도 알고, 어려운 내용이고 공부할 양이 많다고 다들 말해주셨다. 근데 주어진 자료를 보고 자료수집을 더 해보아도, 어떻게 사용하는 것인지, 어떤 상황에서 사용하는지 감은 잡히지만, 막상 코드로 작성해보려니 코드적인 상황이 떠오르지 않아서 좀 멘탈이 터졌다... 많이 사용해보고 적응해야 하는 건 알지만, 아직은 많이 사용해볼 만한 상황을 못 찾았다........ 1) Reat Hooks ① useState setState를 사용하는 방식에는 우리가 알고 있는 방식이 아닌 또 다른 방식인 함수형 업데이트 방식이 있다. 일반 업데이트 방식은 버튼을 클릭했을 때 setNumber가 각각 실행되는 것이 아니라, 배치(batch)로 처리한다. -아래코드를 참고하여 설명..
styled-components 자체는 크게 어렵지 않았다. 문법자체도 달라지는게 없었기에 수월하게 할 수 있었지만, 새로 배운 개념이기에 정리를 해봤다. 1) CSS-in-JS CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이다. CSS-in-JS 방식을 사용하기 위해 플러그인 설치 후, 터미널에서 styled-components를 설치해준다. // 터미널에서 아래 명령어로 설치 yarn add styled-components ① styled-components 사용하기 classname을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-c..
오늘은 버츄얼돔과 렌더링에 대해 다시 짚어보았다. 다시 짚어보다가 렌더링 최적화에 대해 알게 되었다.. 최적화를 하기 위해서 무엇을 해야하는지 알아고보, 시도도 해보았지만 아쉽게도 실패했다..ㅠ 렌더링 최적화를 하기 위해서는 어느 한 부분에 리렌더링이 일어날 때, 하위의 컴포넌트도 렌더링이 되지 않도록 연결고리를 끊어야 한다는 것은 알았다. 하지만 어떻게 해야할지 몰라서 이 부분은 더 찾아보고 시도해야할 듯하다. 못하니까 괜히 오기가 생기는....... 렌더링 최적화 외에 흥미가 생기는 주제가 또 있었다. 바로, '컴파운드 컴포넌트 패턴'이다. 개발자의 입장에서 컴포넌트의 구조를 한 눈에 보기 좋고, 좀 더 수정 등의 유지보수가 간단하게 짤 수 있는 컴포넌트 형태에 대한 방법이다. * 컴포넌트 하나에 p..
오늘은 어제 만들었던 투두리스트의 컴포넌트를 분리해 보았다. 분리하면서 props를 받을 때 구조분해할당으로 받지 않아서 오류가 났었다. 처음엔 뭐가 문제인지 몰라서 헤맸는데, 이 때문에라는 것을 알고 허무했다... 중괄호 때문에.... 컴포넌트를 다 분리하고 나니 함수 중에서 중복으로 사용되는 함수가 있어서 어떻게 해야 하나 하다가 함수도 컴포넌트 분리하듯이 분리해 버리자!! 생각하고 실행에 옮겼다. 파일에 함수를 옮기고 export 하여 컴포넌트 파일에 import를 하였는데, 오류가 나며 실행이 되지 않았다.... 분명 제대로 받아왔는데 왜 안되나... 알아보니 여러 문제가 있었다.... 첫 번째로 export 할 때 매개변수로 넣어준 것들을 컴포넌트 파일의 함수 적용하는 곳에도 똑같이 넣어주어야 ..
오늘은 리액트로 투두리스트를 만들어 보았다. 투두 리스트 추가와 삭제는 강의 내용을 토대로 만들면 어렵지 않게 만들 수 있었다. 하지만 완료 버튼을 누르면 투두가 완료 자리에 가도록 하는게 어려웠다... 완료 자리에 갈 수 있도록 투두에 ' isDone: false '를 기본값으로 주고, 완료 버튼을 클릭하면 false가 true로 바뀌고, 완료 자리로 가도록 하려고 하였다. 그렇게 하기 위해서 map에 if문을 사용하여 바뀌도록 하였다. 생각은 했지만 뭔가 변하는게 없어보여서 혼란스러웠다. 그래서 결국 도움을 받아 조금씩 코드를 작성해 갔다. 적용이 잘 되었지만, 구역을 나누는 기준이 작성되어있지 않았다. //투두 완료 const clickDoneBoxHandler = (id) => { const ne..
어제 보던 강의를 마저 보았다. 생각보다 많이 어렵지는 않았다. 강의를 보며 차근차근 손코딩 해보며 이해하니까 생각보다 수월했다. 이 전에 css작업도 해보고 순수 자바스크립트 작업도 해보아서 아직까지는 괜찮다!! 1) State State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. name이라는 정보를 const name = “ ”; 으로 만들었는데, 만약 name이라는 값이 바뀌어야만 하는 정보였어야 했다면 state로 생성한다. State를 만들 때는 useState()를 사용한다. useState 라는 함수를 이용해서 state를 만든다. useState 는 state를 만들어주는 리액트에서 제공하는 기능이고, “훅”이라고 부른다. ① useState 훅을 사용하는 방식 const 로 선언..
오늘부터 본격적으로 리액트를 접하기 시작했다. 리액트는 처음이라 긴장하며 시작했지만, 생각보다 할 만했다. 사실 쉬는 시간을 많이 가져서 생각보다 공부를 많이 하지는 않았지만, 이정도로도 나쁘지 않다!! 물론 내일이 힘들겠지만...! 리액트지만 뭔가 자바스크립트의 문법을 토대로 하다보니 그렇게 어렵진 않아서 끙끙대지는 않았다. (물론, 많이 안 본 탓도 있지만......) 그래도 뭔가 재미있어서 내일 강의 얼른 다 보고 과제하며 코드를 짜보는 시간을 가져야겠다!!! 지금 실력으로는 어림도 없지...! 1) 개발환경 (npm, yarn) npm yarn 공통점 ① 자바스크립트 런타임 환경인 노드의 패키지 관리자 ② 전 세계의 많은 개발자들이 만든 유용하고 다양한 패키지 ③ 프로그램을 올려놓은 '온라인 데이..
오늘 공부 내용은 상당히 어려웠다..... 동기 비동기의 차이는 이해가 되는데, promise 부분에서 좀 헤맸다. 다행히 영상의 도움을 받아서 감은 잡혔지만, 역시나 직접 사용해봐야 명확히 알게 될 것 같다. 동기 비동기는 깇이 이해하려고 하면 양이 엄청 많아진다고 한다. 그건 추후에 어느정도 이해가 되었을 때 해보기로 한다. 지금 괜히 시도했다간 지금 이해한 내용도 헷갈릴지 몰라... 1) 동기 / 비동기 (태스크큐, 이벤트루프) 동기는 직렬적으로 태스크를 수행하고, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기한다. 비동기는 병렬적으로 태스크를 수행하고, 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다. 자바스크립트의 대부분의 DOM 이벤트 핸들..