[꼼꼼한 개발자] 꼼코더

🧹 두서없이 적는 쉬운 정리 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 컴포넌트를 렌더링 하고 있다. 이 코드도 마찬가지로 굉장히 가독성이 높다. 🧑..

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

🧹 두서없이 적는 쉬운 정리 1. JSX는 Javascript에 XML/HTML을 추가한 JS 확장 문법 2. JSX는 내부적으로 XML/HTML 코드를 React.createElement() 함수를 통해 자바스크립트로 변환한다. 3. React.createElement() 함수 호출 한 결과는 JS 객체가 나온다. 4. 리액트에서 이 객체를 '엘리먼트'라고 부르고 이 객체로 DOM을 만드는 데 사용하고 항상 최신 상태로 유지한다. 5. React.createElement() 함수 파라미터는 3가지[ type(엘리먼트의 유형), props(속성) , children(엘리먼트의 자식 엘리먼트)] 6 JSX 를 사용하는 것은 필수는 아니다 React.createElement() 를 사용해서 개발할 수 있기 ..

🧹 두서없이 적는 쉬운 정리 1. 새로운 웹사이트를 만들 때 리액트를 적용하려면 create-react-app이라는 것을 사용한다. 2. create-react-app은 프로젝트를 생성해 주는 도구다. 리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정을 해준다. 3. create-react-app을 실행하기 위해서는 Node.js 와 npm이 필요하다. 4. 실행 순서 (npx create-react-app [프로젝트 이름] -> cd [프로젝트 이름] -> npm start) (자세한 내용은 아래 참고) 📖 이 전 내용 이 전 글에서는 기존에 있는 웹사이트의 리액트를 적용하는 방법을 사용했다. 하지만 새로운 웹사이트를 만들 때는 처음부터 리액트 가 적용되어 있는 상태로 개발을 시작한다. 그래서 ..

🧹 두서없이 적는 쉬운 정리 1. 기존 웹 사이트에서 React를 추가하려면 HTML 코드 속에 DOM Container와 리액트의 자바스크립트 파일들을 추가해야 한다. 2. 컴포넌트 작성 후 리액트 DOM의 reder() 함수를 사용해서 리액트 컴포넌트를 DOM Container에 렌더링 한다. 3. HTML에서 컴포넌트를 불러오고 실행하면 끝 (자세한 내용은 아래 참고) 📺 HTML과 CSS 리액트로 연동하기 전 HTML과 CSS를 이용하여 간단한 웹 페이지를 만들어보자. ✋🏻 React 추가하기 HTML에 DOM이 들어있는 곳인 DOM Container를 추가한다. 다른 말로는 Root DOM Node라고 한다.(Viturl DOM의 시작점) 여기에서는 'root'라는 ID를 가진 태그를 추가했다...

🧹 두서없이 적는 쉬운 정리 1. DOM은 웹 페이지를 정의하는 하나의 객체, 쉽게 말해 하나의 웹 사이트의 정보를 모두 담고 있는 큰 그릇. 2. 리액트는 빠른 화면 내용을 변경하기 위한 가상의 DOM인 Virtual DOM을 사용한다. 3. 화면이 업데이트된다는 말은 곧 DOM이 수정된다는 말 4. 리액트는 화면 업데이트 시 DOM을 직접 수정하지 않고 업데이트 해야 할 최소한의 부분만을 찾아서 업데이트한다. 5. 컴포넌트는 구성 요소라는 뜻이며 하나의 컴포넌트는 여러 컴포넌트로 조합할 수 있다.(마치 레고) 6. 컴포넌트는 블록 형식이라 재사용성이 뛰어나다 7. 리액트의 장점 : 빠른 업데이트 & 렌더링 속도, 컴포넌트 사용으로 인한 뛰어난 재사용성, 활발한 커뮤니티, 모바일 웹 개발 가능) 8. ..