리액트 기초
-프로젝트는 소문자로 작성해야함
-특수문자는 X
-첫글자는 숫자 X
-react = javascript 기반의 UI 프레임 워크임 -> 설치하지 않아도 됨
-프로젝트의 생성은 npx create-react-app [프로젝트 명]
-실행 : cd명령어를 통해 해당프로젝트의 폴더로 들어가면 됨
c:\react\reactapp>npm start
"http://localhost:3000/" Browser에서 확인
-프로젝트
ㄴ node_modules : 사용하는 package(bootstrap, jquery 등)
ㄴ public : 배포되는 것 (index.html)
ㄴ src: 소스파일 react에 의해서 컴파일되어 index.html id - root인 곳에 바인딩 된다.
ㄴ App.js : 하위 컴포넌트를 구성하는 기본 컴포넌트
ㄴ App.css : 전체 css를 적용
-작성방법
ㄴ 컴포넌트는 js파일 or jsx 리액트파일로 만들면 된다.
ㄴ 작성방법은 class 정의 방식, function 정의 방식
class 정의 방식
function 정의 방식
function Hello(){
}
주석처리 방법
function Hello(){
함수, 변수 등이 선언되는 부분
-> 자바스크립트 주석 방식 // or /* */
return(
<>
렌더링 되는 부분 {/* 주석 */}
</>
);
}
컴포넌트의 사용
App.js
function App(){
return(
<div>
<Hello / > <--import한걸 밝혀서 사용
</div>
);
}
CSS 적용
1) App.js에서 상수로 만들어 사용 방법
App.js
function App(){
return(
</div>
);
}
2) App.css에서 작성하여 사용 방법
App.css에 다음과 같이 css를 작성하고
-> App.js 에 import 해서 사용
3) inline방식(return(내부tag작성 -> {{}} 방식으로 작성 ))
App.js
function App(){
return (
<div style = {{backgroundColor:'red'}}>
</div>
);
Props
어떠한 값을 컴포넌트에 전달할 때 사용하는 객체
단일 할당
App.js
import Hello from './Hello';
function App(){
return (
<Hello name="Props로 전달" />
);
Hello.js
1) Class 방식
<> {this.props.name}</> <-- App.js에서 전달한 name의 값을 받음
);
2) function 방식
function Hello(props){ <-- props를 arguments로 미리 전달
return (
<> {props.name} </>
);
}
다중 / 비구조 할당
import Hello from './Hello.js';
function App(){
return (
<Hello name="properties 전달" color="red"/> <--props로 2개 (name,color)전달
);
class 다중전달
function 비구조 전달
--Props 객체를 부모에게 전달받지 않고 각 컴포넌트가 가지고 있는 defaultProps
Wrap
컴포넌트 감싸기 ->: 기존의 컴포넌트를 묶어서 관리
props.childeren을 통해서 호출이 가능
State
state(상태) 값은 컴포넌트 안에서 값을 업데이트 할 수 있음
상태의 변경은 useState() 후크함수로 만든다
react hook 사용방법
-button event를 통해서 state값을 useState를 통해서 변경하여 화면 출력
useRef
ref 객체를 반환하여 DOM 노드에 접근하여 값을 전달하는 방식
->user ref 자체가 하나의 dom객체라고 이해하기
React에서 List 출력 (배열 렌더링)
{
변수.map((값,index)=>{
})
}
}
구디아카데미 후기/ 국비지원IT개발자 취업 / 전민균 강사님
