React

💡 React 는 페이스북에서 개발하고 관리하는 인터페이스<예를들어 로그인 페이지에서 클릭이벤트(=입력) , 로그인 창을 띄워줌(=출력)>, UI를 만드는 자바스크립트. DOM을 쓰기 않기 위해 만들어짐.

공식문서사이트

(https://ko.reactjs.org/)

zoom 영상과 함께 보기

• 선언형

ex) 택시 : 목적지만 알려줌

• 절차형

ex) 택시 : 자세한 경로를 절차식으로 알려줌

재사용 가능한 UI 단위 (= 중복 코드) → 컴포넌트로 만듦

• 리액트가 많이 쓰이는 이유?

웹사이트가 정적인 요소로만 만들어지다가 점점 업그레이드 되면서 어려운 DOM 조작 을 하지 않고 편하게 쓰기 위해

컴포넌트 정의 할때

두번째 문자를 대문자로 해야함

function helloWorld() {
	return (
 {console.log("hello")}
);
}

JSX

1. 자바스크립트 문법을 인식하려면 { } 를 쓰고 안에 쓴다
2. 컨텐츠가 없을땐 셀프 클로징으로 태그를 닫는다 <태그 />
3. **<> </> → React.Fragment** 태그를 쓰는 이유는

안의 코드의 태그들은 각각으로 못 쓰고 무조건 그룹화 시켜 부모태그를 만들어야 한다 (JSX 문법상)

<>
	<a/>
	<input>
	<h1>
</>

1. 리액트의 이벤트

<>
	<a onClick = {자바스크립트 문법:function(){} }/>
	<input>
	<h1>
</>

리액트 공식문서-지원하는 이벤트 에서 더 참고 할수있다

CRA

개발환경에 필요한 구축 패키지 모음

바벨 - 모든 브라우저가 최신 버전인 ES6 를 읽을 수 있게 바벨이 만들어서 보여주는것

💡 아래 3가지 상관관계 꼭 알기

• gitignore - git이 추적하지 않게(github에 올라가지 않음) 따로 빼놓는 파일

• node_modules - 물리적인 세팅에 필요한 소스코드가 node_modules안에 담겨 있다 용량 차지하는 불필요한 코드(gitignore안에 등록되어있다)

• package.json - 패키지의 정보 등 기록되는 파일. 요약본. (github에 올라가야 한다)

  @

💡 아래 3가지 상관관계 꼭 알기

• **public/index.html**

리액트는 SPA(Single Page Application)로 하나의 index.html이 존재하며, 웹 브라우저에 보여지는 파일입니다. 리액트에서는 index.html 파일을 직접 수정하는 것이 아니라, index.js 파일을 통해 index.html 파일의 id가 root인 div 내부에 코드를 추가하여 화면에 그려지게 된다.

• **src/index.js**
• **App.js**

공식문서 컴포넌트 추출하기 참고하기

컴포넌트로 다 나눠봤을때 잘 읽히는지 고려해보고 나눠보기

main에서는 feed 하나, story 하나씩 등등 컴포넌트를 나눠보기

버추얼DOM - 바뀐 부분만 재조정해서 불필요한 부분은 빼고 동작 된다