React 기초

프론트엔드/React

React 기초

alswlfl 2022. 7. 9. 02:24

React JS: UI를 interative(상호작용)하게 만들어줌

* React 대표적인 특징 3가지

1. JSX 문법

2. Component 기반

3. Virtual DOM

<!DOCTYPE html>

<html>

<body> //1. html만들기

<span>Total clicks: 0</span>

<button id="btn">Click me</button>

</body>

let counter=0;

const button = document.getElementById("btn"); //2. js에서 가져오기

const span = document.querySelector("span");

function handleClick(){

counter = counter+1; //4. 데이터 업데이트

span.innerText = `Total clicks: ${counter}`; //5. html업데이트

}

button.addEventListener("click", handleClick); //3. 이벤트 감지

</script>

</html>

- element 생성 방법

const span = React.createElement("span",{ID:"sexy-span"}, "Hello I'm a span");

//2번째 인수: span의 property, 3번째 인수: span의 내용 -> 잘 사용 안함(너무 어렵)

1) React JS: 엔진, UI를 interative하게 만들어줌

2) react-dom: react element를 HTML에 두는 역할

- render: react element를 가지고 html로 만들어 배치 -> 사용자에게 보여줌

- 렌더링: html요소 또는 react요소 등의 코드가 눈에 볼 수 있도록 그려지는 것

2. JSX

- 자바스크립트를 확장한 문서

- HTML에서 사용한 문법과 비슷한 문법 사용

- Babel: 코드를 변환해줌, jsx로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꾸어줌

- 컴포넌트의 첫 글자는 반드시 대문자: jsx에서는 그냥 태그가 되어버림

- 함수 만드는 방법:

1) function 함수명(){

return(~~~~);

}

2) 함수명 = () => (~~~)

**오류 부분

1 (컴포넌트 X) : ReactDOM.render(Container , root);
2 (컴포넌트O) : ReactDOM.render(<Container />, root); <- 이 코드 적용해야 실행됨

- State: 데이터가 저장되는 곳 -> 값이 바뀔때마다 데이터를 담아줌

- modifier함수: 값을 받아 업데이트하고 리렌더링해줌 -> modifier(값)

- modifier함수를 가지고 state를 변경할 때, 컴포넌트가 재생성됨 -> 새로운 값을 가지고 리렌더링되는 것

앱의 state를 바꾸는 방법: 현재 state를 이용해 다음 state의 값 계산해냄

1) setCounter를 이용해 우리가 원하는 값 넘김

2) 이전 값 이용해 다음 값 알아내는 것

//setCounter(counter+1);

setCounter((current) => current+1);

-> 둘 코드는 이전 값을 이용해 다음 값을 알아내는 것이다: 아래 코드가 더 안전!

[JSX사용 시 주의할점]

- class 사용하면 안됨 ->className

- for사용 X -> htmlFor

- input: uncontrolled -> input의 value를 통제할 수없음

- flipped: true 혹은 false

Props: 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법

-> btn이 받는 유일한 인자

Prop Types: prop들의 타입 확인 -> 경고를 확인하기 위해(어떤 prop들을 받는지 검사)

* prop을 전달할 때의 이름과 받아서 사용할 때의 이름이 동일해야함

create-react-app:리액트 어플리케이션을 만드는 최고의 방식

- 많은 스크립트, 사전설정들 존재