TAB 2022 2학기 학회활동 [팀 스터디]
TIL 포스팅입니다.
작성자 : 40기_강한림
노마드 코더 - ReactJS로 영화 웹 서비스 만들기 수강 과정입니다.
2.1
react 없이 버튼을 얼마나 눌렀는지 알려주는 웹 사이트를 만듭니다.
방법으로는
1) HTML을 만듭니다.
2) JS에서 가져옵니다.
3) event를 감지합니다.
4) 데이터를 업데이트합니다.
React를 사용하기 위해서는
<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>위의 두줄의 코드를 작성해야 한다.
2.2
2.1에서 작성한 내용을 React JS로 다시 구현하는것이 목표입니다.
HTML 코드를 직접 작성하지 않습니다.
대신, JS를 이용하여 <span></span>이나 <button></button>에 해당하는것을 만들것입니다.
이 영상에서 다루는 React JS로 element를 생성하는 방식은 잘 사용하지 않는 방식입니다.
사유 : 더 쉬운 방법이 있어서 그렇습니다.
<script>
const span = React.createElement("span");
</script>
// 처음의 span은 변수의 이름과 같으므로, 꼭 span이 아니어도 됩니다.
// 단, ""내의 내용은 생성하고자하는 HTML 태그와 똑같은 이름이어야 합니다.span을 body태그에 가져다 두어야 합니다.
그걸 위해서는 react-dom을 사용해야 합니다. 이것은 모든 React element들을 HTML body에 둘 수 있도록 해줍니다.
ReactDOM.render();
// render()에서 ()내의 내용을 사용자에게 보여줍니다.span을 어디에 두어야하는지 알려주어야 합니다. 그렇게 하기 위해서,
<body>
<div id="root"></div>
</body>
<script>
const root = document.getElementByI("root");
const span = React.createElement("span");
ReactDOM.render(span, root);
</script>span은 비어있습니다. creatElement에 더 입력할 수 있는것이 존재하기 때문입니다.
creatElement의 두번째 요소로는 span의 소유물(id, class 등 span에 둘 수 있는것.)이 들어갑니다.
세번째 요소로는 span에 들어가게 될 내용을 작성할 수 있습니다.
const span = React.createElement("span", {id : "firstspan"}, "HELLO!");다음과 같이 작성할 수 있습니다.
두번째 요소로 {}내에 style을 추가하는것도 가능합니다.
const span = React.createElement("span", {id : "firstspan", style{color: "blue"}}, "HELLO!");
2.3
button과 button에서 일어나는 event를 감지하는 방법을 알아봅니다.
button을 작성하는것은 span과 동일합니다. 현재는 id,class를 주지 않으므로, null로 둡니다.
const btn = React.creatElement("button",null,"Click me!");
현재의 render는 1가지의 const만 보여줍니다. 따라서 JS에 div를 만든뒤에, 내용/세번째 요소으로 배열을 주어 span과 btn을 차례로 둡니다.
헷갈리지 않도록 여기서는 이름을 container로 둡니다.
const container = React.creatElement("div",null,[span,btn]);
ReactDOM.render(container, root);
2번째 요소로는 event listner를 줄 수도 있습니다(btn).
const btn = React.creatElement(
"button",
{
onClick: () => console.log("im clicked"),
},
"Click me!"
);작성중 위의 내용중 span이 h3로 변경되었습니다.
span에도 event listner을 줄것 입니다. event listner의 이름을 onMouseEnter로 합니다.
on으로 시작해야 React JS에게 event listener을 생성한다고 알려줄 수 있습니다.
on + event(click, MouseEnter 등)으로 작성합니다.
const h3 = React.creatElement(
"h3",
{
onmouseenter: () => console.log("mouse enter"),
},
"HELLO?"
);2.4
2.1~3의 복습입니다.
2.5
createElement가 아닌 다른 방법으로 생성하는 법을 배워봅니다.
더 간단한 방법으로 JSX를 사용합니다.
const Title = (
<h3 id="title" onmouseenter={() => console.log("mouse enter")}>
Hello?
</h3>
);
const h3 = React.creatElement(
"h3",
{
onmouseenter: () => console.log("mouse enter"),
},
"HELLO?"
);위의 두 코드는 동일한 동작을 수행합니다.
JSX의 작성방식은 html과 유사한것을 확인할 수 있습니다.
property는 HTML 태그의 속성처럼 작성하면 됩니다.
button도 동일하게 만들어 줍니다.
const Button = (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);style을 작성할때, {{}} 중괄호를 2개 사용한다는 것을 주의해야합니다.
이때 오류가 발생합니다. 이것은 처음에 React-dom을 작성해준것 처럼,
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>을 작성해준뒤, 현재 코드들이 작성되고있는 script 태그에
<script type="text/babel">이렇게 작성해주면 더이상 오류가 발생하지 않습니다.
babel은 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꾸어주는 역할을 합니다.
container에 3번째 요소로 작성된 배열에 h3와 btn을 각각 Title과 Button으로 수정해 줍니다.
// 저는 여기서 VScode내에서는 오류가 발생하지 않았지만, 브라우저에서 실행하니 아무것도 뜨지 않아서 확인해보았습니다
이러한 오류인데... 왜인지는 잘 모르겠습니다.//
2.6
container부분을 수정할것입니다.
button과 Title을 함수로 만들어줍니다.
const Title = () => (
<h3 id="title" onmouseenter={() => console.log("mouse enter")}>
Hello?
</h3>
);
const Button = () => (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("im clicked")}
>Container에 포함시킵니다.
const Container = (
<div>
<Title /> <Button />
</div>
);<Title/>은 위의 const Title~의 내용과 동일합니다.
이것은 컴포넌트이며, 반드시 대문자로 작성하도록 합니다.
Container또한 함수로 만들어주어 작성합니다.
3.1
state : 데이터가 저장되는 곳
let counter = 10;
<h3>Total Clicks: {counter}</h3>이러한 방식으로 변수를 연결해 줄 수 있습니다.
버튼을 누를때마다 count가 1씩 올라가게 해봅시다.
function countUp() {
counter = counter + 1;
}
<button onClick={countUp}>Click me</button>
count의 값을 업데이트 하기 위해서는(변경된 것이 ui에 보이게 하기 위해서는) countUp 함수를 호출할 때마다 다시 render해주어야 합니다.
function countUp() {
counter = counter + 1;
ReactDOM.render(<Container />, root);
}render 함수를 만들어 사용하면 더 편리합니다.
function countUp() {
counter = counter + 1;
render();
}
function render() {
ReactDOM.render(<Container />, root);
}
3.1
자동으로 리렌더링하는 방법을 알아봅니다.
const data = React.useState();렌더링 하면, [undefined, f]가 log에 뜨게 됩니다.
undefined는 data이고, f는 data를 변경할 때 사용하게 되는 함수입니다.
초기값을 설정할 수 있습니다.
const data = React.useState(0);이때, data의 초기값은 0입니다.
배열에서 요소를 꺼내서 이름을 부여하는 방법
//첫번째 방법
const counter = data[0];
const modifier = data[1];
//두번째 방법 (주로 사용하는 방법)
const [counter,modifier] = food;
3.2
modifier함수를 사용해봅시다.
counter을 업데이트 하는데 modifier함수를 사용하려 합니다.
onClick 함수를 만들어 사용합니다.
const conClick = () => {
modifier(123456789);
};
리렌더링이 자동으로 이루어지는것을 확인할 수 있습니다.
modifier의 이름을 setCounter로 바꾸어 다시 작성합니다.
const conClick = () => {
setCounter(counter + 1);
};
3.3
복습 강의 입니다.
3.4
사용자들의 input을 어떻게 얻고, form을 만들었을때, state는 어떻게 작용하는지 알아봅니다.
counter는 어쩌면 다른곳에서 변경되어서 우리가 생각한 값이 아닐수도 있다는것을 알아야 합니다.
그래서 결과가 다르게 나올 수도 있습니다.
state를 바꾸는 2가지 방법이 있습니다.
1.setCounter를 설정해서 새 값으로 변경해주는 방법.
2. 이전값을 이용해서 현재 값을 계산하는 방법
2번째 방법으로 setCounter을 수정합니다.
setCounter((current) => current + 1);항상 현재 상태로 전달해줍니다.
3.5
unit conversion(단위 변환) 앱을 만들것입니다.
1. 분을 시간단위로 바꿉니다.
다음과 같이 준비합니다.
<label>Minutes</label>
<input placeholder="Minutes" type="number" />
<label>Hours</label>
<input placeholder="Hours" type="number" />
<label>은 <input> 앞에 작성될 수 있는 태그입니다. 만약, 누군가 label에 작성된 글씨를 누르면 input이 선택됩니다.
label에 input을 연결해주기 위해서는, input에 id가 필요합니다.
lebal에는 for 속성이 필요합니다.
다음과 같이 작성합니다.
<label for="minutes">Minutes</label>
<input id="minutes" placeholder="Minutes" type="number" />
<label for="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />하지만 이 방식은 html에서만 사용하고, JSX에서는 사용하지 않습니다.
여기서 html과 JSX의 몇가지 다른점이 있습니다.
순서대로 html, JSX 의 작성 방식입니다.
| HTML | JSX |
| class | className |
| for | htmlFor |
const [minutes, setMinutes] = React.useState();
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
/>
사용자가 다른 값(여기서는 minute)을 입력할때마다 value(minutes의 input에 입력합니다.)를 업데이트 시키고자 합니다.
사용자가 input에 새로운 값을 입력할 때마다 state(minutes)을 업데이트 하고자 합니다.
이것은 change 이벤트를 통해 알 수 있습니다.
onChange함수를 만듭니다.
const onChange = () => {};
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
state로써 minutes라는 값을 가지고 있는데, 이것을 input의 value로 넣어주고자 합니다.
input에 변화가 생기면, onChange함수를 실행해줍니다.
const onChange = () => {
console.log("somebody wrote");
};
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
변화는 event.target.value 순서로 들어가 있습니다.
그대로 작성해줍니다.
const onChange = (event) => {
console.log(event.target.value);
};이제 이것을 minutes에 넣어줍니다.
const onChange = (event) => {
setMinutes(event.target.value);
};잘 작동하는지 확인합니다.
<h4>You want to convert {minutes}</h4>
// React-dom과 babel 오류로
코드를 수정합니다
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type = "text/babel">'22 - 1학기 > 팀 스터디' 카테고리의 다른 글
| [웹 FE 스터디] ReactJS ~ 3.5 (0) | 2022.10.06 |
|---|---|
| [웹 FE 스터디] 리액트 시작하기(3) (0) | 2022.10.06 |
| [웹 FE 스터디] THE BASICS OF REACT ~ 3.5 Inputs and State (0) | 2022.09.29 |
| [React] Vanila JS vs React Js | JSX (1) | 2022.09.29 |
| [웹 FE 스터디] React : 수정 ~ 삭제 기능 (0) | 2022.09.29 |
