[웹 FE 스터디] React

TAB 2022 2학기 학회활동 [팀 스터디]

 TIL 포스팅입니다.

작성자 : 40기_강한림

작성 참고 및 강의 : 생활코딩 - WEB - React

 

---

6. 이벤트 

 

<input type="button" onclick="alert(hi)">

- onclick  ="" : 버튼을 클릭했을때 ""내에 입력한 요소를 실행/작동한다.

 

 

 

▣ react로 위와 같은 결과(버튼을 눌렀을 때, hi 경고창이 뜨게 한다.)를 만들어 보자.

 

<Header title = "WEB" onChangeMode={function(){}}

 

- onChangeMode의 prop/속성의 값으로 함수를 전달한다.

- function의 { }내에는 이후에 WEB을 클릭하면 함수를 호출하여 클릭했을때 실행되야하는 것들을 입력해준다.

 

<header> 

<h1><a onClick={function(event)

{

event.preventDefault();

props.onChangeMode();

}}></a></h1>

</header>

- onClick ={} : a 태그가 포함된 부분을 클릭했을때 함수가 호출된다.

- function(event) : event 객체를 첫번째 파라미터로 주입해주어야 한다.

- event.preventDefault() : a 태그가 동작하는 기본 동작을 방지한다. (reload를 방지한다)

-props.onChangeMode() : onChangeMode를 호출한다.

 

 

()=> 은 function()과 같다.

 

- onChangeMode에 id값이 파라미터로 필요할 때

 

<a id ={t.id} onClick={function(event)

{

event.preventDefault();

props.onChangeMode(event.target.id);

}}></a>

 

- event는 객체

- event.target.id

: target은 이벤트를 유발시킨 태그를 가르킨다. (이경우는 <a></a>)

: event.target.id는 target의 id값을 가져온다.

 

 

7. state

 

입력 : prop  return : 새로운 ui

 

prop : 컴포넌트를 사용하는 외부자를 위한 데이터

state : 컴포넌트를 만드는 내부자를 위한 데이터

 

state를 사용하기 위해서는

- import {useState} from react;

 

const mode = "WELCOME" 

- mode는 현재 '변수'이다.

 

const _mode = useState("WELCOME");

- useState는 배열을 return 한다.

- 그 배열의 0번째 원소는 상태의 값을 읽을때 쓰는 데이터, 1번째 데이터 그 상태의 값을 변경할때 쓰는 함수이다.

 

const _mode = useState('WELCOME');

const mode = _mode[0];

con setMode = _mode[1];

- useState의 인자는 그 state의 초기값이다.

- state의 값은 0번째 index의 값으로 읽는다.

- state를 바꿀때는, 1번째의 index의 함수로 바꾼다.

 

= > 

이걸 다르게 표현하면,

const [mode, setMode] = useState('WELCOME'); 

- 위 3줄의 코드와 같다.

- 보통 이러한 형태로 작성한다.

- mode는 변수의 이름이 온다. 변수의 0번째 index값이 온다.

- setMode에는 그 변수의 1번째 index값이 온다.

 

상태/값을 바꿀때

 

setMode('WELCOME');

- setMode로 인해 값이 바뀌면, 컴포넌트(이 강의에서는 App)가 다시 실행된다.

 

const [id, setId] = useState(null);

- 현재 값이 선택되지 않았다면, 초기값을 null로 한다.

 

태그의 속성을 입력할 때, 숫자로 입력하여도 태그의 속성으로 넘기면, 문자로 취급된다. ( 2 입력 -> '2'로 변함)

 

8. Creat

 

<a href = "/create">Create</a>

- 만들고자 하는것 : Creat를 누르면 Creat에 해당되는 ui가 나타나도록 한다.

 

<a href = "/create" onClick={(event)=>{

event.preventDefault();

setMode("CREAT");

}}>

 

 

content = <Create onCreat={(_title, _body)=>{

const newTopic = {title : _title, body: _body}

}}></Create>

 

 

- onCreat prop에 함수를 전달하면, 사용자가 Creat 버튼을 누르면 함수가 실행된다고 고지해준다.

 

 

function Creat() {

return <article>

<h2>Creat</h2>

<form>

<p><input type = "text" name = "title" placeholder="title"/></p>

<p><textarea name="body" placeholder="body"></textarea></p>

<p><input type="submit" value="Creat"></input></p>

</form>

</article>

}

 

- 어떤 정보를 입력해야하는지 알려주기 위해서 placeholder 속성을 사용했다.

- <textarea></textarea> : 여러줄을 표시하기 위해 사용한다.

 

 

<form></form> 태그는 submit 했을때, 페이지가 reload된다.

- > event.preventDefault(); 로 reload 되는것을 방지할 수 있다.

 

 

const [a, b] = useState(null);

- a는 읽을때 사용하고, b는 a를 바꿀때 사용한다.

 

 

const [nextId, setNextId] = useState(4);

 

content = <Create onCreat={(_title, _body)=>{
const newTopic = { id:nextId, title : _title, body: _body }

const newTopics = [...topics]

newTopics.push(newTopic);

setTopics(newTopics);

}}></Create>

 

- [...topics] : [...xxx] xxx의 내용을 복제한다. (배열형태인 것을 복제하기 위해 []를 사용한다)

- newTopics는 topics의 복제본이다.

- newTopics에 push를 해서 newTopics/복제본를 바꾼다.

- 복제본을 setTopics를 통해 topics를 바꾼다.

 

react는 오리지널(topics)과 새로들어온 복제본(newTopics)이 다르다면, 그때 creat한다.

 

 

- > 생성한뒤, 상세 페이지로 이동도 하게 한다.

 

content = <Create onCreat={(_title, _body)=>{
const newTopic = { id:nextId, title : _title, body: _body }
const newTopics = [...topics]
newTopics.push(newTopic);
setTopics(newTopics);

setMode('READ');

setId(nextId);

setNextId(nextId+1);
}}></Create>