[꼼꼼한 개발자] 꼼코더

🙋🏻‍♂️ 문제 ✅ 정답 💡 느낀 점 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에 관하여도 잘 공부해야겠다.

🧹 두서없이 적는 쉬운 정리 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를 가진 태그를 추가했다..