이제 스타트업에서 백엔드 개발로 일을 시작한 지 1년쯤 되어가는.. ㅎ
주니어 개발자이지만,
최근 들어 '그래도 FE를 이렇게까지 하나도 몰라도 되나...ㅠ' 하는 생각이 많이 들어서
웹 FE 개발의 아주 x 1000000000 기초라도 찍먹해 봐야 겠다..! 싶어 작성하게 된 시리즈..!
생판 전혀 모르는 스택을 공부할 때는 노마드코더의 니꼬샘의 강의를 좋아해서, 이 시리즈의 대부분은 니꼬쌤 강의의 개인적인 정리본- 정도가 될 것 같습니다.
React에 대한 경험이라고는, 인강을 완강한 기억조차 없는 사람으로서
우선 React 기초부터..!
Before React
| 버튼을 누를 때마다, counter 개수가 증가하는 페이지를 만들려고 한다.
-> React 를 사용하지 않고, 이를 HTML && Js 만으로 작성한다면?
<!DOCTYPE html>
<html>
<body>
<span>Total clicks: 0 </span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter = counter + 1;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>위와 같이 element를 가져오고, element에 eventListener를 달아 주어야 한다!
해당 강의 영상 댓글 중에서 (from. seoan 님)
- 버전 번호는
x.y.z형태! - 치명적인 버그 수정은 z 번호를, 새로운 기능 출시 혹은 치명적이지 않은 버그 수정은 y 번호를, 호환성이 유지되지 않는 변경은 x번호를 바꾸어 배포한다!
React Element 생성(Our First React Element)
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
"span",
{
id: "sexy-span", style: {color:"red"} },
"Hello I'm a span"
);
ReactDOM.render(span, root);
</script>
</html>
| 바닐라 JS는 HTML을 잡아서 -> JS로 조작
| React JS는 JS에서 시작해서, HTML로 render하며 끝난다!
=> HTML을 만들고, 찾아서 가져와서 업데이트하고... 하는 과정을 거치지 않아도 된다.
이것이 React JS의 힘!
해당 강의 영상 댓글 중에서 (from. starapple33 님)
- MacOS에서는 CORB 위반으로 unpkg를 못 불러오므로,
crossorigin을 추가해 주어야 함.
React Element의 property로 eventListener 추가하기
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
id: "title",
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I'm a span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked");
},
"Click me"
);
const container = React.createElement("div", null, [btn]);
ReactDOM.render(container, root);
</script>-> onMouseEnter, onClick 과 같이 property 형식으로 eventListener를 달 수 있다!
JSX
JSX란?
JSX : Syntax Extension to Javascript
-> Javascript를 확장한 문법!
( 본 적은 엄청 많은데 뭔지 오늘 처음 알았... )
JSX 를 사용한다면, React.createElement로 작성한 아래와 같은 코드를..
<script>
const h3 = React.createElement(
"h3",
{
id: "title",
onMouseEnter: () => console.log("mouse enter")
},
"Hello I'm a title"
);
</script>아래와 같이, HTML과 유사한 형식으로 쓸 수 있다!
<script>
const Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")>
Hello I'm a title
</h3>
)
</script>하지만, 브라우저는 JSX를 이해할 수가 없다..
-> babel을 사용!
=> 작성한 코드를, 브라우저가 이해할 수 있는 형태로 변환해주는 라이브러리!
JSX의 사용
h3 Element
<script>
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")>
Hello I'm a title
</h3>
)
</script>Button Element
<script>
const Button = () => (
<button
style={{
backgroundColor: "tomato",
}}
onClick={() => console.log("im clicked")}
>
Click me
</button>
</script>=> 각각의 Element를 함수로 바꿔 준다!
h3와 Button Element를 감쌀 div
<script>
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>=> Element를 HTML 태그랑 비슷한 형식으로 사용 가능!
P.S 직접 만든 Element는 모두 대문자로 시작해야 한다!
-> HTML 태그와 겹치지 않도록~~
