React -> 사용자 인터페이스를 만드는 자바스크립트의 라이브러리
React 시작하기
1. React 폴더를 만들 상위 폴더에 가서 터미널을 열고 입력한다.
( 나 같은 경우 상위 폴더를 vscode로 끌어와서 놓고 vscode에서 터미널을 실행함 )
npx create-react-app 앱 이름-> happy hacking ! 이라는 말이 터미널에 나옴. 그럼 새로 생긴 폴더를 끌어서 visual studio code에 놓는다.
2. 다시 새 터미널을 열고 npm start를 입력한다.
npm start-> 그러면 localhost:3000 주소로 리액트 기본 홈페이지가 실행된다.
3. 정리
- public에서는 index.html을 제외하고 전부 삭제
- src에서는 아래 사진의 4개 제외하고 삭제 후 index.js의 빗금 친 부분을 지워버린다 !
- 처음에 에러나는 부분이 있으면 보통 import 한 파일이 삭제된 것이기 때문에 에러를 잘 읽고 지우면 된다.
그리고 css파일도 다 지워주고 App.js 파일에 내용을 비우고 helloworld를 써주면
빈화면에 helloworld가 나온 웹페이지가 보인다 !
React의 기억할만한 특징 ( 내 기준 )
1. 리액트에서는 JSX 표현을 사용한다
const hello = <span> hello </span> ;-> HTML 문법을 JS 코드 내부에 써줘서 시각적으로 도움을 주는 JS 확장 문법
2. Component 단위로 구성 - 재활용가능한 UI 단위 !
function App(){
return (
<Header></Header>
<Body></Body>
<Footer></Footer> {*/ <---- Components */}
)
}-> Component는 독립적인 단위의 소프트웨어 모듈. 기능 별로 나눠서 유지보수 좋음 , 전체 코드의 구성 파악이 용이 !
3. 선언형 프로그래밍 - what ! 무엇을 만들건지를 기술하면 그것을 만들어냄
cf) 명령형 프로그래밍 -> how ! 어떻게 만들지 일일이 기술해서 만들어냄
-> 선언형 프로그래밍은 가독성이 높으며, 디버그가 쉽다.
4. 가상 돔 - 이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소 집합을 계산하는 기술
DOM은 위 사진과 같이 JS와 HTML/CSS 사이를 잇는 객체 모델이다.
React는 변경 시 가상 DOM을 만들어내서, 실제 돔과 비교하여 변경된 것만! 바꾼다
->불필요한 update를 줄이고, DOM 처리 횟수를 최소화하여 성능을 좋게한다 ! !
기타 잡 개념 노트
props -> 부모 컴포넌트로부터 물려받는 속성
state -> 컴포넌트의 상태. 이것에 따라 여러 값을 바꾸고 화면에 표현하는 것 같다
--> const [ age, setAge ] = useState("초기값")
useState = [ 저장소, 저장소 값 변경 함수 ] 여서 구조 분해 할당을 하는듯함(내 생각)
node -> 자바스크립트가 브라우저 밖에서도 동작하게 하는 자바스크립트 실행 환경 !!!!
npm -> node.js 환경에서 만들어진 패키지를 관리할 수 있는 도구
create-react-app -> react 개발환경을 세팅해주는 도구
이상이다 ~!
'Coding > REACT' 카테고리의 다른 글
| [React] Context API + useReducer 로 전역 상태 관리 하기 (0) | 2022.08.23 |
|---|---|
| [React] 동적 라우팅 (0) | 2022.06.26 |
| [React] component, state, props, useEffect 연습 ( Monsters ) (2) | 2022.06.18 |
| 세상 사람들이 map 함수 적용 시 key props를 부여하는 이유 (1) | 2022.06.12 |
| VScode로 React 시작하기 (0) | 2022.06.12 |
댓글