본문 바로가기

리액트 25

[리액트] 리액트 컴포넌트의 변천사, 역사에 대하여 이번 글에서는 리액트 컴포넌트의 역사에 대해 한번 알아보도록 하겠습니다. 제가 리액트를 접했을 때는 클래스형 컴포넌트 -> 함수형 컴포넌트로 변하는 시기였고, 지금도 많은 예제나 돌아가는 베이스 코드가 클래스형 컴포넌트로 작성된 것들이 많이 있습니다. 또한 리액트의 Error Boundry처럼 리액트 형님들이 함수형으로 제공하지 않는다고 말한 것들도 있으니 결국은 둘 다 알아야 하고 대부분 리액트 공부하다 보면 클래스형으로 눈에 익히고 함수형으로 손에 익히는 그런 느낌이지 않을까 싶습니다. 쨋든 지금 시점에서 과거의 코드 방식을 모두 기억하고 따라할 필요는 없지만(공식적으로 사용 금지된) 역사를 알아야 어떤 느낌으로 리액트가 가고자 하는지 알 수 있을 듯하여 다뤄보도록 하겠습니다. 첫 번째. 리액트 컴포.. 2021. 7. 29.
[리액트] table에는 thead와 tbody가 필요해요(feat. react 형님들) 여느때와 같이 리액트 컴포넌트를 만들고 나서 동작을 확인하고 있는데 콘솔창에 다음과 같은 에러가 떴다. 하.. warning 로그가 있으면 뭔가 큰일 날거같고 너무 허접해보이니 생기면 없애는 나에겐 스트레스다. 그러니 한번 해결해보자. Warning: validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. 바로 구글링 해보면 react 상에서 table를 쓸때에는 되도록 thead 와 tbody 태그를 써서 해야한다고 되어있다. thead와 tbody 태그를 넣어주니 바로 콘솔경고는 사라졌다. 하지만 나는 이전까지 thead와 tbod.. 2021. 7. 19.
[리액트] 러닝 리액트 2판 - 알렉스 뱅크스, 이브 포셀로 [ 선택 이유 ] 기존의 초록 멧돼지 책이 새롭게 2판으로 돌아왔다. 공식 도큐먼트가 리액트 라이브러리의 기초와 개념을 잡아준다면 책은 기초와 개념에 살을 덧붙여준다고 생각한다. 그런 생각으로 공식 도큐먼트를 2 회독하고 리액트 책을 찾아보게 되었고 마침 2판이 나왔다고 해서 선택하게 되었다. 마침 회사 프로젝트오 기존 레거시에서 리액트도 계속 변경 중이고 나 또한 리액트 문법에 익숙해져 있다. 근데 사수가 없다 보니 내가 짠 코드, 설계가 옳은 방향으로 진행되는 건지 항상 고민을 가지고 있다. 이 책이 그런 고민에 약간의 도움, 실마리가 되지 않을까 기대를 하고 보았다. [ 본문 ] 전체적인 줄거리는 개념 -> 활용 -> 라이브러리 순으로 진행된다. 이는 대부분의 프로그래밍책과 비슷한 구성이라고 생각한.. 2021. 7. 19.
[리액트] 프로젝트에 웹팩을 적용해보자 #3 (feat.타입스크립트) 2021.07.06 - [개발/리액트] - [리액트] 프로젝트에 웹팩을 적용해보자 #1 (feat.타입스크립트) 2021.07.06 - [개발/리액트] - [리액트] 프로젝트에 웹팩을 적용해보자 #2 (feat.타입스크립트) 이전 포스트에 이어서 이번 포스트에서는 리액트를 개발하기 위한 webpack-dev-server의 새로운 모습인 webpack serve를 적용하고 핫로딩을 적용해보도록 하겠다. Webpack 4에서는 webpack-dev-server를 설치하여 사용했었다. 하지만 Webpack 5부터는 별도의 라이브러리를 설치하지 않고 Webpack에서 바로 사용한다.(하지만 아직 공식문서에는 webpack-dev-server를 설치하라고 나와있다. 굳이 필요없다) npx webpack serve.. 2021. 7. 6.