목표 설정
React 기본
- 컴포넌트 단위의 개발의 장점을 이해할 수 있다.
- JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다.
React 주요 개념과 사용법
- 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이를 이해할 수 있다.
- props의 특징과 규칙을 이해할 수 있다.
- props와 state와의 차이점을 이해할 수 있다.
- 상태 변경방법과, 그 이유를 이해할 수 있다.
- 이벤트를 처리할 수 있다.
- lifecycle을 통해 작동 원리를 이해할 수 있다.
- React 컴포넌트 간 데이터 흐름 및 상호 작용의 원리를 이해할 수 있다.
etc.
- React 공식 문서를 활용할 수 있다.
- Create React app을 구성하고 있는 bable 및 webpack의 목적과 필요성을 이해할 수 있다.
Component 컴포넌트
컴포넌트.. 컴포넌트 컴포넌트가 뭐야 ?
하나의 의미를 가진 독립적인 단위 모듈
모듈 ? 이라고할수도있고, 하나의 객체? 라고할수도있겟다.
내가생각하는 컴포넌트란 아무래도 react-> jsx 문법 = javascript + html 이다
그러다보니 보여지는 시각적인게 강해진다.
그러면서 컴포넌트는 두가지 강한 특성으로 이해할수있다. DOM적인 측면에서
하나의 엘리먼트 덩어리, div덩어리, 하지만 거기에 기능적인 요소들이 덩어리지고있다.
다시생각하면
기능이 내장된 하나의 div 덩어리 이렇게생각해볼수도있고.
html로써 실존하는 객체 덩어리 이렇게 생각해볼수도있겟다.
확실한것은 컴포넌트를 왜써야하는데 ?
직관적이고, 재사용성좋고, 그 안에서 해결하거나 처리해야할 부분,헨들링 등 모두 안에서 존재하기때문에
캡슐화가 되어있다고 볼수있다.
그래서
react에서는 컴포넌트를 선언하는 두가지 방법이있다.
class방식 function방식 -> 이거만 보면 거의 객체지향 프로그래밍 할때랑 비슷한거같다?
Component 선언하기
class 컴포넌트
//class
//참고로 React.Component나 Component를 상속한거나 같다. import해온 방식에따라서 달라지기때문
class app extends React.Component{
render(){
return(
<div>Hello world!</div>
)
}
}function 컴포넌트
나는 함수방식으로 훨씬 많이 사용했엇다 ; (처음에 그렇게 배웠기때문에)
//function
function app(){
return (
<div>Hello world!</div>
)
}위아래는 동일한 컴포넌트를 생성한다.
더이상의 설명이 필요한가 생각이든다..
react는 누군가가 만든 프레임워크이기때문에
사용방법이 이미 문서화 되어있다.
왜 이렇게 써야하는데? 하는 의문이 생긴다면
1+1이 왜 2야? 하는것과 같다.
내것으로 만들려면 타이핑해보고, 이렇게 사용하면 되는구나 받아들이자.
(원리에 대해서는 나중에 더 찾아보면된다.)
- 바벨 이라는 친구가 jsx를-> js코드로 바꿔준다.
컴포넌트의 규칙
component의 하나의 중요한 규칙이있는데
그것은
render() // 함수식 표현에서 return은 내부적으로 render가 실행되는것임으로 이렇게 설명한다.
내부에 return 에는
하나의 DOM만 보여야 한다.
즉 return 시키는것은 <> 태그 하나로 묶여있어야한다는것이다.
그래서 <Fragment></Fragment> 라는것으로 묶는경우가 있는데
이 태그의 Shorthand 표현식은
<></> 로 쓸수있다.
만만한 div 쓰자. 혹은 컴포넌트의 설계를 잘 해보자.
프레그먼트를 사용하면 실제 렌더링시 그부분은 없다.
ES6그리고 JSX
JSX가 뭐야 아까부터.
잠깐 언급했엇는데
javascript와 html을 합친 표현이다.
html태그 중간에 {} 를 열어서 안에 js 표현식을 쓸수있다. (표현식에 대해서 찾아보면 js문법과는 조금 차이가 있다. 대표적으로생각하면 if문은 쓸수없다. 왜? 찾아보자.)
그래서 주로 3항연산자를 사용해서 분기처리하는경우가 많다.
그리고 jsx는 기본적으로 ES6가 친밀하게 사용하는경우가 많다.
-디스트럭쳐링
-스프레드오퍼레이터
-레스트파라미터
-디폴트파라미터
-템플릿리터럴
-화살표함수
-for-of-loop
import, export 문법
ES6문법이긴한데
모르고있다가 React와서 알게된 케이스가 나같은 경우인거같다.
import 함수 또는 컴포넌트 또는 객체 from '경로'
진짜 vscode에서 extension 좀 만져보면..
솔찍히 엔터한번만 잘쳐도
import 따로해준기억이 별로없다.
다만 문법자체는 이해해야한다.
특정 모듈을 불러오는데 그게 어디에 있다 이런느낌으로 쓴다.
node에서 require쓰던거 생각하면 조금더 이해가 잘된다.
export가 생각해볼게 조금있다.
즉
다른곳에서 널 이렇게 부르게 할꺼야. 이런식으로 별명지어서 내보낼수있다.
그냥 너자신 너 어쨋든 이름있잖아 그거 그대로써
function Box(){
return(
<div>박스입니다.</div>
)
}
export default Box;
import Box from "./Box.js" ;//이런식이 된다.
//...
export const firebaseInstance = firebase;
export const authService = firebase.auth();
export const dbService = firebase.firestore();전에 firebase쓸때 짯던 코드 긁어왔는데 이런식으로 특정 모듈덩어리를 받아와서 내가 사용할것들만 분리해서 작명해주고
그것을 내보내주면 좋다.
전체는 내가쓸꺼니까 Instance라고 명시적으로 따로만들어서 사용하고
인증서비스부분 따로분리,
db서비스부분 따로분리
Props
프롭스가 뭐지 ?
리액트는 아래로 흐른다 라는 얘기가있다.
명확하게 트리구조를 가지고있고
root 부터 시작해서
내부에 컴포넌트들이 자식을 계속해서 가지는 구조로 만들어져있다.
그렇다면
데이터들은 어떻게 전달할까
자식에게 전달하는 가장 쉬운방법이 props 라고 생각하면된다.
그놈의 데이터전달. 이게 문제다.
한 계단, 두계단 정도는 괜찮은데
props에도 한계라는게 있는법이다.
50번에 걸친 컴포넌트안에 컴포넌트안에 컴포넌트 .... 가 있다면
props로 계속 계속 내려주는게 상식적인가 ?
5번만 넘어가도 왠지 이거 아닌거같은데 하는기분이 들것이다.
사실 이부분이 어려운거지 그냥 props는 한두다리 용으로 참좋다.
사설이 길어졌는데
즉 데이터를 자식 컴포넌트에게 전달할수있다.
class컴포넌트와 function컴포넌트 두가지로 표현해보면
class컴포넌트의 props
//class
class Box extends React.Component{
constructor(props){ //여기에 프롭스를 인자로 받는다.
super(props) // react.component에서 상속받기때문에 props를 한번 명시적으로 써주는게좋다.
// 물론 리액트가 똑똑해서 잘 해주긴하지만. 확실하게하는게 좋다.
}
render(){
return (
<div>
<Item item="아이템">이것은Children</Item>
</div>
)
}
}
class Item extends React.Component{
constructor(props){
super(props) // 위와 마찬가지
}
render(){
return(
<>
<div>{this.props.item}</div>
<div>{this.props.children}</div>
</>
)
}
}
장황하게 작성했는데
결과는
<div>
<div>아이템</div>
<div>이것은Children</div>
</div>
<></> Fragment는 없다. 정말 묶는용이다. 테이블때 많이쓰인다는거 같은데 ..
function으로 보면
function컴포넌트의 props
//function
function Box(){
return (
<div>
<Item item="아이템">이것은Children</Item>
</div>
)
}
function Item(props){
return(
<>
<div>{props.item}</div>
<div>{props.children}</div>
</>
)
}결과는 동일하다.
하지만 한결 짧아지고 직관적이게 바뀐게 보인다.
State
State가 뭐지
쉽게생각하면 컴포넌트에서 쓸수있는변수!
하지만 이 변수는 좀 특별하다.
변화를 감지해서
render()를 다시 시켜줘!
이게 리액트의 진짜 제일 기분좋은 기능이다.
데이터의 변화를 감지?
매번 DOM다 자식노드들 제거하고
다시 데이터가지고 createElement 시켜서 반복문돌고 .. 어휴
리액트는 이래서 너무좋았다.
state그래서 어떻게쓰는데 ?
두가지가있다.
Hook에대해서 아직 얘기나온게 없어서 추후 설명하고
- class컴포넌트방식에서 state를 사용하는방법
- function컴포넌트방식에서 state를 사용하는방법
class컴포넌트에서 state
//class
class Box extends React.Component{
constructor(props){ // 프롭스없는데 왜 이거써요? 명시적으로 써주는게 좋다.
super(props)
this.state = {count:1};
}
render(){
return(
<div>
{this.state.count}
</div>
)
}
}
스테이트를 변경하는 메서드를 써야한다.
this.setState({count:2})
function컴포넌트에서 state
function Box(){
let [count,setCount] = useState(1); //초기값을 준다.
// hook인데 쉽게생각하면 카운터에는 값 , 셋카운터에는 그걸 변경하는 함수를 준다
return(
<div>
{state.count}
</div>
)
}
setCount(2)
여기서는 setCount(2) 이렇게하면 count가 2로 바뀐다.
추가적으로 마무리
css 클래스 부여하듯이 class를 jsx에서 줄수없는 이유 -> es6문법에 class와 겹치기때문
그래서 className 이라는 카멜케이스로 css클래스를 부여할수있다.
이후
onClick ={핸들러}
onChange = {핸들러}
핸들러의 첫번째 인자는 event인자가 들어온다.
event.target.value 이런거 기억하자.
끝.
