리액트

[코드숨] 리액트 2주차

코드숨 2주 차에 얻은 것 코드숨 2주 차에 얻은 것은 컴포넌트 분할을 하는 부분에 있어 어떻게 컴포넌트 분할을 하는 게 좋을지 생각하는 방법을 배우게 되었습니다. 컴포넌트를 분할할 때 항상 기준점에 대해 이건 어떻게 나눠야 하지? 이건 어떻게 해야 하지!? 이런 식으로 계속 고민하는 부분이 있었는데 이 부분에 대해서 코드 가독성을 저해시키며 컴포넌트를 만드는 경우도 있었고 한 컴포넌트에 너무 여러 가지 기능을 수행하게 끔 설계해서 난처했던 적도 있었습니다! 하지만 이번 주에 코드 숨 과정을 진행하며 컴포넌트 분할할 때 어떤 걸 생각하고 분할을 하는지 배울 수 있어 좋았습니다! 반성 이번 주는 지난날의 새로운 것을 배우거나 처음 써보는 기술을 적용하기 전, 해당 기술을 토대로 제작한 투두 리스트 프로젝트..

[코드숨] 리액트 1주차 주간회고

코드숨을 시작하며.. 코드숨을 시작하게 된 계기는 좋은 코드를 작성하기 위해 시작했습니다! 기대보다 더욱 더 코드숨은 저에게 가치 있는 프로그램이었습니다! 코드숨 1주 차 과정을 통해 제가 가지고 있던 안 좋은 습관들을 피드백을 통해 수정하였고 정말 만족스러운 과정이었습니다! 코드숨을 진행하며 제가 부족한 것이 어떤 것인지 알게 되었고 그 부분을 고치기 위해 어떤 노력을 해야 할지 피드백을 받을 수 있었습니다! 또한, 깃을 사용할 때 있었던 안 좋은 습관도 바로 잡아주셔서 더욱 의미 있는 프로그램이라는 것을 느꼈습니다! 진행 과정 우선 1주 차 첫 번째 과제는 let을 사용하지 않고 간단한 클릭 이벤트가 있는 페이지를 만드는 것이었습니다. 어렵지 않은 과제인 것 같지만 어느 정도 생각을 해야 하는 과제였..

ErrNote] (리액트 애니메이션처리) 리렌더링 시 애니메이션이 되지 않을 때

리액트 리 렌더링 시 애니메이션이 되지 않을 때 처리 방법 리액트에서 간단하게 애니메이션을 구현하다 첫 렌더링 시 애니메이션이 정상 작동하지만 데이터를 새롭게 받아와 리 렌더링이 되었을 때 애니메이션 효과가 적용이 안 되는 이슈가 발생했습니다! 해결한 방법은 애니메이션 효과를 적용해야하는 컴포넌트에 key값을 추가하여 해결하였습니다! key값을 추가하기 전 애니메이션 효과가 적용되지 않은 이유 리 렌더링 시 리액트는 내부 콘텐츠만 변경하게 됩니다. 이때, key를 추가하면 key가 변경될 때 다른 엘리먼트로 인식하기 때문에 애니메이션 효과가 적용됩니다!