React 프로젝트를 진행할 때 CSS In Js 방식을 즐겨 사용합니다. 그중에서도 Styled Component 라이브러리를 사용합니다. 제가 생각하는 Styled Component의 장점으로 Scss 라이브러리 설치 없이 Scss 문법을 사용할 수 있습니다. 또한 Material UI 혹은 Ant Design 라이브러리를 사용할 때 다른 방식들보다 커스터마이징이 쉽다 느낍니다. 해당 컴포넌트 이름을 그대로 가져와 사용하면 되기 때문입니다. 다른 방식들의 경우 Material UI와 Ant Design에서 지정한 클래스명 혹은 태그를 알아야 되는 번거로움이 있습니다. classname을 사용하지 않고 스타일을 줄 수 있기 때문에, 이럴 때는 classname 중복돼서 생기는 문제를 해결할 수 있습니다..

리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해줍니다. 아래 이미지는 버전 16.3 이전 생명주기를 그린 것입니다. 이미지를 보면 준비를 끝내고(initialization) compoentWillMount는 그려지기 직전 그 후 render는 그려지는 부분, componentDidMount는 그려진 직후입니다. (이후 버전에서 componentWillMount가 getDerivedStateFromProps로 이름이 바뀝니다.) componentDidMount의 경우 타이머, API 호출, 렌더된 후 최초로 할 일 등을 구현해줍니다. updating 부분은 props가 바뀌거나 state가 바뀌었을 때 주기를 나타냅니다. props 바뀔 때가..

*return의 '()'와 같은 괄호는 없어도 됩니다. 태그는 꼭 닫혀 있어야 합니다. (태그 사이에 아무 내용이 안들어가는 경우 셀프클로징 태그 사용) function App() { return ( ); } function App() { return ( ); } 두개 이상의 태그는 하나의 태그로 감싸져야 됩니다. function App() { return ( ); } function App() { return ( ); } // 프래그먼트 사용 자바스크립트 값을 사용하기 위해서는 '{}'를 사용합니다. function App() { const name = 'react'; return ( {name} ); } 스타일을 지정해주려면 스타일 객체를 따로 만들어주어야 합니다. 카멜케이스로 스타일을 작성해주어야 ..

✔ React란? React는 페이스북에서 만든 자바스크립트 UI 라이브러리입니다. React Document에도 사용자 인터페이스를 만들기 위한 Javascript 라이브러리라고 소개하고 있습니다. UI 혹은 사용자 인터페이스 UX를 만든다는 것은 사용자들에게 보이는 부분을 그려준다는 뜻이기도 합니다. 그런데 React를 사용하기 전에, 우리는 HTML과 CSS를 통해서 사용자에게 웹을 제공할 수 있었습니다. 이후에 React가 등장하고 사용되는 이유는 무엇일까요? ✔ React를 왜 사용할까? 웹의 뼈대를 이루는 HTML과 웹의 디자인을 담당하는 CSS, 동적 기능을 추가할 수 있는 순수한 Javascript를 통해서 웹을 개발할 수 있습니다. 특히 정적 페이지를 만든다면 React와 같은 라이브러리..