[꼼꼼한 개발자] 꼼코더

🧹 두서없이 적는 쉬운 정리 1. Elements는 한번 생성되면 변하지 않는다는 불변성을 가지고 있다. 2. 다른 말로 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다는 말 4. 엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다 5. 리액트로만 만들어진 모든 웹사이트들은 단 하나의 Root DOM Node를 가지게 된다 6. 렌더링을 위해 ReactDOM에 render()라는 함수를 사용 7. 이 함수는 '첫번째 파라미터인 리액트 엘리먼트'를 '두 번째 파라미터인 html 엘리먼트'에 (즉 DOM 엘리먼트) 렌더링 하는 역할 8. 결국 리액트 엘리먼트가 렌더링 되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정 9. 한..

🧹 두서없이 적는 쉬운 정리1. Elements란 리액트 앱을 구성하는 가장 작은 블록들2. 실제 브라우저 DOM에 존재하는 엘리먼트 > DOM 엘리먼트, 리액트 Virtual DOM 존재하는 엘리먼트 > 리액트 엘리먼트3. 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현버전4. Elements의 역할은 화면에서 보이는 것을 기술5. 리엑트는 React.createElement()를 통해서 만든 엘리먼트를 이용해서 실제 우리가 화면에서 보게 될 DOM 엘리먼트를 생성6. 리액트 엘리먼트는 자바스크립트 객체 형태로 존재하며 마음대로 변경할 수 없는 불변성을 갖고 있다7. createElement() 3가지의 파라미터(type, props, children) 8. type에는 html 태그와 리액트 컴포넌..

🧹 두서없이 적는 쉬운 정리1. JSX 장점 (코드가 간결해진다, 가독성 향상되어 유지보수 용이, Injection Attack 해킹을 방어하여 보안성 향상)2. JSX는 내부적으로 XML/HTML 코드를 React.createElement() 함수를 통해 자바스크립트로 변환한다.3. JSX는 자바스크립트에 추가로 XML과 HTML 섞어서 사용하면 된다4. JSX에서는 중괄호 {} 를 사용하면 무조건 자바스크립트 코드가 들어간다.5. children은 html을 사용하듯 상위 태그가 하위 태그를 둘러싸도록 하면 자연스럽게 정의된다.6 가독성도 높으며 간결하고 직관적으로 코드를 작성할 수 있게 해주는 것이 바로 JSX의 역할 (자세한 내용은 아래 참고) 🙃 이전 복습이 전 글에서 'JSX 사용은 필..