기록

JSX

• 컴포넌트를 편리하게 사용하도록 하는 리액트만의 문법 -> Babel이라는 도구를 통해 JS로 컴파일(자바스크립트란 소리)
• 중괄호 안에 변수명, 함수, 새로운 JSX넣기 모두 가능

•  JSX엘리먼트
  • html의 img태그와 달리 연 태그가 있으면 닫는 태그도 반드시 있어줘야 함 
  • 2개 이상의 태그를 쓸 때는 꼭 다른 태그로 묶어줘야 함
    • react fragment : 아무 내용 없이 단지 다른 태그들을 묶어주는 역할로 사용

• 어트리뷰트(속성을 사용할 때) 
  • camelcase사용->class 대신 className으로 사용
  • 속성을 사용할 때 큰 따옴표로 감쌈

• 주석
  • 자바스크립트 주석 : //
  • jsx주석 : /**/

컴포넌트

• 컴포넌트는 요소를 의미함
• 각각의 요소를 만들어 하나의 object를 구성하는 방법으로 리액트는 전체 웹 페이지를 구성함
• 컴포넌트란 props를 입력받아 JSX를 리턴하는 함수
  • 클래스형 컴포넌트도 존재하지만 사용하기 복잡하여 잘 사용하지 않음
• 컴포넌트들이 모여 전체 리액트를 구성

• 컴포넌트의 장점(레고 블럭과 유사)
  • 재사용성:다른 리액트 모듈에서 언제든지 호출가능
  • 가독성:html코드들을 일일히 보는 것보다 보기 편함
  • 유지보수하기 편리

리액트의 탄생이유

• 인터넷 브라우저에서 화면이 나타나는 원리
  
  •  Client(브라우저)가 Server로 데이터를 요청, Server는 Client(브라우저)로 데이터를 응답해줌
• 데이터의 3가지 요소
  • HTML : 뼈대
  • CSS : 스타일
  • Javascript : 동적인 요소, DOM조작
• 우리가 작성한 html코드는 DOM이라는 노드트리 개채구조로 변환되어 저장된 후 화면에 나타남
• Javascript가 DOM을 조작했었으나, 점점 웹 페이지가 복잡해지면서 React라는 DOM을 쉽고 직관적이고 체계적으로 조작할 수 있는 Javascript라이브러리가 탄생함

기본미션

공부한 내용

드뎌 끝~ 이제 리액트 강의를 봐야것네용

기본미션

공부한 내용

필기하는 맛이 좋네용 ~.~

기본미션

공부한 내용

손으로 공부하는게 더 좋아서 손필기로 정리를 해보았어용 -ㅅ-

• app.js:3 Uncaught TypeError: Cannot set properties of null (setting 'innerText') at app.js:3:17 -> 코드 내의 어떤 값이 null이다
• classname 가져오기

const hellos = document.getElementsByClassName("hello");

console.log(hellos);

• tag name으로 가져오기

const title = document.getElementsByTagName("h1");

• css 찾기처럼 가져오기 -> hello 클래스 안에 있는 h1태그 가져오기, 여러개가 해당되도 첫번째 요소만 가져

const title = document.querySelector(".hello h1"); //하나의 요소만 가져옴

const title2 = document.querySelectorAll(".hello h1"); //모든 요소 가져옴,array형식으로

const title = document.querySelector("#hello");
const title2 = document.getElementById("hello"); //둘이 똑같음

• 자바스크립트는 HTML에 이미 연결되어 있기 때문에 자바스크립트를 통해 HTML을 바꿀 수 있음
• document가 모든 것의 시작점, 즉 웹사이트를 의미함
• document = 자바스크립트 관점에서의 html

#3.1 HTML in Javascript

• 자바스크립트로 특정 속성 가져오기 : html에서 id를 통해 요소를 가져옴

document.getElementById("")

• 자바스크립트는 HTML 속성들을 가져오지만, HTML자체를 보여주진 않음 -> HTML을 표현하는 object를 보임

• 자바스크립트로 html 변경하기

• 자바스크립트로 요소 가져오기

console.log(title.id);
console.log(title.className);

• 즉 우리는 document에서 어떤 항목이든지 간에 이것들을 가져와서 이 항목들을 변경할 수 있음