공부한 내용을 정리하고 복습하기 위한 정리 글
🪸 React 설치하기
- Reack JS를 설치하기 위해서는 두 개의 Javascript 코드를 import해야 한다 ⇒ react, react-dom
- 이 때, import 순서 지키기
(순서가 바뀌어서 에러가 나는 경우도 있다고 함)
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
// 여기에 js작성
</script>🪸 React 시작하기
-
React는 html을 직접 작성하지 않고, JS와 ReactJS를 이용하여 element를 생성한다.
-
리액트를 import했기 때문에 createElement function을 가진 리액트 object에 접근 가능하다
🔹React JS
- 어플리케이션이 아주 인터랙티브하도록 만들어주는 library.
엔진과 같다.
🔹React-dom
- library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해줌.
- ReactDOM.render()
render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것. 즉, 사용자에게 보여준다는 의미
ReactDOM.render(span, span이 가야할 위치) [ 17버전 ] - 그래서 보통 body에 id=“root” 만들어서 span을 root 안에 두라고 함
React.createElement("span", {span의 property}, “span의 내용”) - property는 class name, id도 가능 style도 가능
(근데 어차피 import해서 안씀 CRA를 쓸거라...) - react18에서는
ReactDOM.createRoot(root).render(span);이렇게 사용
🪸 JSX
-
리액트는 html 엘리멘트를 자바스크립트를 통해서 만든다.
처음에는 react.createElement를 사용했으나 이것을 이제 jsx로 대체한다. -
React.createElement는 html태그 이름과 속성을 표현하는 객체를 인자로 입력하여 리액트 엘리멘트를 만들었지만 Jsx를 이용한다면 마치 일반 html문서를 직접 조작하는 듯한 개발 경험을 얻을 수 있다.
-
Html attribute에 들어가는 값은 객체용 괄호로 감싸준다.
하지만 jsx는 브라우저가 이해하지 못하므로 바벨을 통해 jsx형태의 코드를 기존의 createElement형식으로 변환하여야 한다.
해석은 바벨에게 맡기고, 개발이 쉽고 가독성이 좋은 jsx를 사용한다. -
JSX : JS를 확장한 문법, html과 거의 비슷하게 생겼음
-
바벨(babel) : jsx로 적은 코드를 브라우저가 이해할 수 있는 코드로 변환해준다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
/* jsx 작성 */
</script>-
JSX를 이용해서 마치 HTML 문서처럼 자연스럽게
한 Component가 다른 Component를 감싸게 하려면
component를 함수로 작성해주어야 한다. -
직접 만든 요소는 반드시 대문자로 시작해야 한다.
-
jsx는 애플리케이션을 여러 가지 작은 요소로 나누어 관리할 수 있게 해준다.
-
예시 : 타이틀과 버튼을 하나씩 만들어본 예시
각각 mouse enter와 click 이벤트를 추가함
- 실질적으로는 이렇게 쓰지 않음 jsx를 브라우저가 어떻게 이해하는지 알기위한 공부...
🪸 State
-
Jsx에서 자바스크립트를 입력하려면 중괄호 내부에 입력해준다.
이벤트 리스너는 inline 방식으로 추가해준다. -
state는 상태, 해당 컴포넌트의 상태를 나타내는 변수이다.
-
단순히 이벤트를 감지해서 변수 값을 변경한다고 해도 그게 화면 변화로 감지되진 않는다.
왜냐면 render작업을 해주어야 하기 때문이다.
즉 상태 변화를 화면에 보여주려면 render를 다시 해주어야 한다. -
하지만 상태가 바뀔 때마다 render 메서드를 호출하는 것은 비효율적이다.
🐳 SetState
-
리액트JS에서 데이터를 저장하고 자동으로 리렌더링을 일으킬 수 있는 방법
-
const data = React.useState();를 console.log()를 사용해서 콘솔창에 출력해보면...
>[undefined, fn ]-> undefined와 함수가 적힌 배열이 나타난다.
undefined는 data이고 f는 data를 바꿀 때 사용하는 함수 -
React.useState()함수는 초기 값을 설정할 수 있다.
즉, undefined는 초기 값이고 두 번째 요소인 f는 그 값을 바꾸는 함수 -
배열을 꺼내기
const x = [1, 2, 3]⇒const [a, b, c] = x;으로 꺼낼 수 있음
(a=1, b=2, c=3 이므로 각각을 꺼내 쓸 수 있음)
이를 이용해 React.useState()의 배열을 꺼내 쓴다. -
예를 들어…
const food = ["tomato", "potato"]
// 위 배열의 아이템을 꺼내서 사용하고 싶을 때 각각 변수로 만들어 사용하면
// 코드가 길어지고 귀찮다
const [myFavFood, secondFavFood] = food;
// myFavFood -> "tomato"
// secondFavFood -> "potato"
// 이렇게 사용할 수 있음
const [counter, modifier] = React.useState();
// 배열의 첫 번째 아이템을 counter,
// 두 번째 아이템인 함수를 modifier라고
// 이름을 부여하고 꺼내 사용할 수 있다.-
어떤 값을 부여하던 modifier함수는 그 값으로 업데이트하고 리렌더링을 일으킨다.
-
React.useState(데이터 초기 값)
⇒ 이렇게 데이터의 값을 초기화 할 수 있다. -
React.useState() 배열에서
보통 데이터에는 counter처럼 원하는 대로 붙이고 f(함수)는 set 뒤에 데이터 이름을 붙임 (예 : setCounter)
어떤 값을 부여하던 setCounter 함수는 그 값으로 업데이트하고 리렌더링 일으킴 (인자로 받은 값으로 업데이트)
- counter라는 데이터를 받음
React.useState(0) ⇒ 데이터의 초기 값은 0임 - return()에 그 데이터를 담고 있음 (리턴은 사용자가 보게 될 컴포넌트)
- 버튼이 클릭 되면 counter값을 바꿔줄 함수 호출 -> setCounter
- counter의 새로운 값을 가지고 counter 함수를 호출
- 그 새로운 값은 setCounter(counter + 1)에 써준 counter + 1
-
[state, setState]에서 state 는 '값' setState는 state를 업데이트 시킬 함수 이다.
setState로 state를 어떻게 업데이트 할 지 조작할 수는 있지만, setState 자체를 변경하지는 못 하는 것 -
state : 변경되는 값
setState : 변경되지 않는 함수
🐳 State function
-
state를 세팅하는 데는 2가지 방법
1) 직접 할당 :setState(state +1)
2) 함수를 할당 :setState(state => state +1)
(함수의 첫 번째 인자는 현재 state 이다) -
현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우에는 (1),
현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우에는 (2)
const [counter, setCounter] = React.useState(0);
const onClick = ()=>{
setCounter(counter+1) // 1번
setCounter((current)=>current+1); // 2번
}- current를 사용하면 react가 현재 값을 확실히 보장하기 때문에 오류가 생기는 것을 방지할 수 있다.
