리액트란 무엇인가 1
React (웹 프레임워크)
- react.js는 자바스크립트 라이브러리의 하나임
- 사용자 인터페이스를 만들기 위해 페이스북에서 개발!
- 싱글 페이지 어플리케이션(SPA) 및 모바일 어플리케이션 개발 가능
- 2011년 페이스북의 뉴스피드에 처음 적용, 2012년 인스타그램닷컴에 적용.
- 2013년 발표, 오픈소스화 됨.
React 사이트
- 공식문서!!
리액트의 동작 원리
- 초기 랜더링
- 가상 DOM 변경
- 재조정
- 실제 DOM 업데이트
랜더링 -> html 변경 -> dom에 주입 -> html로 구성된 dom구조가 랜더링
파셜랜더링!
-> 변화된 부분만 업데이트 하겠다는 의미
dom : document object model의 약자, html기반으로 문서를 만드는 구조 모델
가상 dom : 여기다가 그려놓고,
실제 dom : 완료시 여기다가 복사하는 느낌 (?)
리액트란 무엇인가 2
리액트 프로젝트 생성
리액트 공식문서 -> vscode에서 새 폴더 만들고 터미널에 아래 명령어 입력
프로젝트 생성 및 코드분석
프로젝트 안에 리액트프로젝트/타입스크립트기반리액트프로젝트 폴더 만들기
위에서 리액트 프로젝트는 만들었고
타입스크립트 기반.. 명령어는 다음과 같음
npx create-react-app todolist --template typescript : 뒤에 옵션을 지정
cd todolist
npm start <- 해줘야 함
해주면 세팅 끝
그리고 코드를 좀 살펴보다..
jsx 문법 1
- jsx 문법은 무엇인가?
예시를 보자
기존 js문법으로 리액트를 사용하려면 매우.. 불편하다
리액트에서만 쓰는 jsx문법(js문법이 조금 달라진..)을 써서 좀 편하게 쓰려는 것
2. 주의해야 하는 점 : 최상위 부모가 있어야 함 병렬구조로
일반적으로
로 감싸긴 하는데 ..싫다면?<></> <- 프레그먼트(pregment) 기호로 감싸줄 수 있다.
- 라고 안 쓰고 리액트에서는 이라고 쓴다. (태그 쓰임새는 같은데 이름만 달라진 것)
padding : 컨텐츠와 보더의 간격
이런식으로 바꿔서
확인해 볼 수 있다.
jsx 문법 2
리액트에서 js 코드를 작성할 수 있다.
만약 return 뒤의 jsx문법을 사용하지 않는 부분에서 변수를 선언하고 그 변수의 값을 실 내용에 반영하고 싶다면? 중괄호로 감싸주면 된다.
예시 :
또한 중괄호 안에 일반 변수 뿐만 아니라 조건문을 넣어줄 수도 있다
주의점은 jsx에서는 if문이 서비스되지 않아서.. 삼항연산자를 써주면 된다
name변수가 "리액트"라면 화면에 yes를 나오게 하고, 아니면 no를 나오게 함
현재 name변수가 "리액트"이기 때문에
다음처럼 yes가 나온 화면을 확인할 수 있다.
아무것도 없는 값을 랜더하고 싶으면 다음처럼 null 값을 넣어줄 수도 있음
팁!
이런식으로 포트설정을 작성할 수도 있다.
(참고 : 자바스크립트에서는 || 연산자를 사용하여 첫 번째 값이 false일 경우 두 번째 값을 반환함.)
jsx 문법 3
리액트에서는 범용 요소에 문자 형태로 넣는게 아니라 객체 형태로 넣어줘야 함
..아무튼 인라인 스타일링을 해볼거야
app.css에서는 -를 사용하는 표기법을 사용하지만..
인라인 css 작성 코드에서는 카멜 표기법을 사용한다.
이런식으로 컴포넌트 내부에서 스타일코드를 작성하고 적용하는걸 해볼 수 있다
에.. 또한
와 같은 태그들
html에서는 뒤에서 안 닫아줘도 됐는데 jsx에서는 닫아줘야 오류가 나지 않는다
..근데
태그는 닫는게 의미가 없으니까
<- 이런식으로 축약해서 하나만 써줘도 된다 (셀프클로징이라고 함)
주석 다는 방법 : {/ 주석문을 작성합니다 /}
협업할 때 주석?
아래처럼 작성할 수 있다.
{/
작성자 : ?
작성일 : 2024.10.30
내용(remark) : 기능에 대한 내용
/}
