[꼼꼼한 개발자] 꼼코더

🙋🏻‍♂️ 문제 ✅ 정답 💡 느낀 점 자바의 깊은 공부를 위하여 꼭 필요한 지식인데 자주 까먹어서 적어봤다..

🧹 두서없이 적는 쉬운 정리 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를 사용하면 가독성이 높고 직관적인 코드를 작성할 수 있다. 2. 따라서 리액트 애플리케이션을 개발할 때에는 무조건 JSX를 사용하자 (자세한 내용은 아래 참고) 🧑🏻‍💻 Book 컴포넌트 작성(Book.jsx 생성) Props로 name과 numOfPage를 받아 출력하는 컴포넌트이다. 누가봐도 어떤 역할을 하는지 이해가 되는 코드이다. 따라서 JSX를 사용하면 가독성이 높고 직관적인 코드를 작성할 수 있다. 🧑🏻‍💻 Library.jsx 추가 (Library컴포넌트 생성) Book 컴포넌트를 사용하는 상위 컴포넌트인 Library를 만든다. Library 컴포넌트는 총 3개의 Book 컴포넌트를 렌더링 하고 있다. 이 코드도 마찬가지로 굉장히 가독성이 높다. 🧑..

🙋🏻‍♂️ 문제 ✅ 정답 💡 느낀 점 Props는 파라미터이지만 객체 타입인 걸 기억을 잘해야겠다.

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

🙋🏻‍♂️ 문제 ✅ 정답 💡 느낀 점 컴포넌트가 구성하는 블록이고 그 안에 props를 통한 여러 엘리먼트가 최종적으로 리액트 페이지를 구성하는 것.

🙋🏻‍♂️ 문제 ✅ 정답 💡 느낀 점 이전에 잠깐 접했지만 상태관리가 어려운 거 같다.. State에 관하여도 잘 공부해야겠다.