React
- 시작 (Terminal 에 입력)
- npx create-react-app {{프로젝트명}}
- cd {{프로젝트 명}}
- npm start
- 리엑스에서 데이터 바인딩
- {} 중괄호를 사용하여 바인딩 하기 (className과 같은 거의 모든 곳에서 사용이 가능)
import './App.css';
import logofrom './logo.svg'
function App() {
// let post = "강남 고기 맛집"
function 함수() {
return 100
}
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<h4> {함수()} </h4>
<img src={logo} alt="" />
</div>
);
}
exportdefault App;
- JSX에서 Style 속성을 집어넣을 때
- Vue, Html에서 Style의 속성을 집어넣을 때처럼 style='font-size: 16px' 와 같이 하는 것이 아닌
- style={스타일} 로 객체 성격을 나타낼 수 있도록 해야한다.
<div style={ {font-size: 16px, color: 'blue' } }>스타일</div>- 다수의 스타일을 집어넣을 경우 , 를 기준으로 작성하면 된다
- 오른쪽의 value의 값은 항상 문자열로 작성
- 또한 font-size와 같이 케밥케이스로 작성하는 것을 카멜케이스로 변경하여 작성해야한다. (이유는 js에서 -는 뺄셈이기 때문.)
<div style={ {color: 'black', fontSize: '16px'} }>스타일 복수 작성</div>- 여기서 해당 div들에 대해 계속 이렇게 작성하기 귀찮을 경우 바인딩을 사용하여 작성할 수 있다.
import './App.css'; import logofrom './logo.svg' function App() { let post= {color: 'blue', fontSize: '30px'} return ( <div className="App"> <div className="black-nav"> <div style={ post }> 개발 Blog </div> </div> </div> ); } exportdefault App; - 리엑트에서 데이터 관리법
- 변수에 넣기
- 변경이 자주 되지 않는 경우의 데이터의 경우 사용하기
- let data = '~~~~~~'
- State에 넣기
- state에 데이터를 저장해놓고 사용하는 이유?
- state 안의 데이터가 변경되면 새로고침이 없어도 HTML이 자동으로 재랜더링이 되기 때문이다.
- 그래서 부드럽게 새로고침 없이 변경이 된다.
- useState에서 S 대문자는 필수
- state는 변수 대신 쓰는 데이터 저장공간
- 상단에 import React, { useState } from 'react' 추가
- useState(데이터)
- ex) useState("남자 코트 추천");
- 이렇게 작성을 하게 되면 [a,b] 이런 두개의 array에 생성이 된다.
- a에는 남자 코트 추천
- b에는 남자 코트 추천 state를 정정해주는 함수
- 그래서 요즘에 작성하는 코드 방식은
- let [a,b] = useState('남자 코트 추천')
- ES6 destructuring 문법이다.
- 파이썬에서는 익숙한 문법으로 파이썬에서는 a,b = 10,20 으로 사용되는데
- 리엑트에서는 let [a,b] = [10,20] 이렇게 사용된다.
- 그래서 let [글제목,글제목변경] = useState('남자 코트 추천')
- 또한 useState()안에는 문자, 숫자, array, object 모두 저장가능하다
- ex.
- let [글제목,글제목변경] = useState(['남자 코드 추천', '강남 우동 맛집'])
import React, { useState }from "react"; import "./App.css"; // import logo from "./logo.svg"; function App() { let [글제목, 글제목변경]= useState(["남자 코드 추천", "강남 우동 맛집"]); let [글제목2, 글제목변경2]= useState("여자 코트 추천"); // let posts = "연제 고기 맛집"; return ( <div className="App"> <div className="black-nav"> <div>개발 Blog</div> </div> <div className="list"> <h3> {글제목[0]} </h3> <h3> {글제목[1]} </h3> <p>11월 28일 발행</p> <hr /> </div> <div className="list"> <h3> {글제목2} </h3> <p>11월 28일 발행</p> <hr /> </div> </div> ); } exportdefault App;
- state에 데이터를 저장해놓고 사용하는 이유?
- 변수에 넣기
Tip!!
- 태그에 class 를 주고 싶으면? ⇒ div className=”클래스명”
- React, Vue, Angular를 사용하는 이유 데이터 바인딩을 할 수 있기 때문
- 사용방법
- 중괄호 안에 해당 변수명을 넣어준다.
또는function App() { let post = "강남 고기 맛집" return ( <div className="App"> <div className="black-nav"> <div>개발 Blog</div> </div> <h4> {post} </h4> </div> ); } - function App() { let post = "강남 고기 맛집" function 함수() { return 100 } return ( <div className="App"> <div className="black-nav"> <div>개발 Blog</div> </div> <h4> {함수()} </h4> </div> ); }
- 사용방법
만약 터미널에 뜨는 warning eslint가 보기 싫다면 상단에 주석으로
/* eslint-disable */ 을 작성하면 된다.
그리고 react에서의 addEventListener
- 옛날 자바 스크립트 방법: onClick=””
- 리엑트: onClick={ 클릭될 때 실행할 함수() }
- 만약 함수를 작성하기 귀찮다면
- onClick={ ()⇒{실행할 내용 } } 이렇게 작성할 수도 있다. arrow function
클릭시 1증가하도록 만드는 방법
- state를 통해 변수를 생성 후
- state를 생성시 함께 생성했던 함수를 사용하기
- ex) let [num, numchange] = useState(0) 의 경우
- num을 0이 아닌 1로 변경하고 싶을 경우
- numchange(1)을 하게 되면 변경된다.
- 정리위와 같이 state를 이용하여 변경해야 재렌더링이 가능하다.
- import React, { useState } from "react" let [따봉, 따봉변경] = useState(0) <div onClick={()=> {따봉변경(따봉+1)}}> {따봉} 👍 </div>
- 만약 버튼을 클릭시 남자코트에서 여자코트로 명칭을 변경하려면
- 기존의 state 데이터를 변경해야하는데 일반적으로 state데이터를 직접적으로
- let [성별, 성별변경] = useState([’남자’,’여자’])
- let newArray = […성별]
- newArray[0] = 성별[1]
- 성별변경(newArray)
- 변경하지 않도록 하기 때문에 deepCopy를 해야한다.
- 기존의 state 데이터를 변경해야하는데 일반적으로 state데이터를 직접적으로
- 만약 버튼을 클릭시 글제목을 변경시키려 한다면?
<button
onClick={() => {
let newArray = [...글제목];
newArray[0] = 글제목[2];
newArray[1] = 글제목[0];
newArray[2] = 글제목[1];
글제목함수(newArray);
}}
>
🐱🏍
</button>
하나의 return () 소괄호 안에는 하나의 태그만 있어야 한다
HTML을 줄여서 쓸 수 있는 방법:
- 리엑트의 Component 문법
- (똑같은 태그를 중복해서 작성할 경우 사용)
- Component 유의사항
- 함수명의 첫글자는 대문자로 작성
- return()안에 있는건 태그 하나로 묶어야함
- 또한 return() 내부를 묶을 때 의미없는 div를 쓰기 싫다면
- <> </> 이렇게만 작성해도 된다,
ex) 아래와 같은 코드를 계속해서 작성하려할 경우
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
기존에 작성된 return() 이 끝나고 난 뒤에 이렇게 작성을 한 후
function {함수명} {
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
}
초기에 적혀있었던 return() 안에
<함수명></함수명> 작성을 하면 적용 할 수 있고
<함수명 /> 이렇게만 작성해도 적용 가능하다.
- 어떤걸 Component로 만드는게 좋을까?
- 반복출연하는 HTML 덩어리들
- 자주 변경되는 HTML UI들
- Component를 많 이 만들었을 때 단점?
- state 쓸 때 복잡해진다.
- 상위 component에서 만든 state를 쓰려면 props 문법을 이용해야한다.
- state 쓸 때 복잡해진다.
[동적인 UI 만드는 step]
- html CSS로 미리 디자인 완성
- function Modal(){ return ( <div className="modal"> <h2>제목</h2> <p>날짜</p> <p>상세내용</p> </div> ) }
- UI의 현재 상태를 state로 저장
- // model을 변경할 때 사용하는 setState를 작성할 때는 // set을 붙여주는 것이 관습 // 현재 상태는 열림/닫힘 or 1/0 or true/false 이렇게 해주면 일반적 let [modal, setState] = useState({현재 상태})
- state에 따라 UI가 어떻게 보일지 작성
- JS라면 {} 중괄호 안에 if문을 사용하거나 하면 되지만 html이기 때문에 삼항 연산자를 사용하여 조건문을 작성하기.
정리하자면 state는 스위치이고 삼항 연산자는 기계라고 생각하면 된다.
이제 해당 제목을 누르면 모달창을 띄우도록 하려면??
// 기존의 modal의 값은 false 이기에 바로 modal의 값을 true 바꾸려고 하면 안된다
// 그래서 state의 값을 변경해주기 위해서 setModal을 사용하여 modal의 값을 변경해줘야한다.
<div>
<h2 onclick={ () => {setModal(true)} }>제목입니다</h2>
</div>
과제: 제목을 한번 더 누르면 모달창이 사라지도록 하려면??
// 기존의 코드에서 모달을 변경 할 때 조건만 넣어주면 된다.
<div>
<h2 onclick={ () => {
modal == false ? setModal(true) : setModal(false)
}
}>제목입니다</h2>
</div>
[반복문으로 같은 HTML을 반복 생성하는 법]
우선 array helper methods 로 map을 설명해주셨음
- array 자료 갯수만큼 함수안의 코드를 실행해준다.
- 함수의 파라미터는 array안에 있던 자료
- retrun에 뭘 적어주면 해당 데이터를 array로 담아준다.
[1,2,3].map(function(a) {
console.log(a)
)
// 1
// 2
// 3
[1,2,3].map(function(a) {
return a*2
)
// [2,4,6]
그래서 html 안에서 반복문을 넣을 수 있는 방법으로는 중괄호 안에 for문을 사용하는건데
if문과 똑같이 {} 중괄호 안에는 for문을 사용할 수 없기 때문에
map 메서드를 사용해준다.
[1,2,3].map(function(){
return <div>안녕</div>
)
리엑트에서는 array안에 HTML을 담아놔도 잘 보여준다.
그래서 위의 코드를 작성하게 되면
[<div>안녕</div>,<div>안녕</div>,<div>안녕</div>] 이렇게 작성이 되는데
리엑트를 거치게 되면 아래와 같이 안녕을 감싸는 div태그가 3개 생성이 된다.
그래서 만약에 태그가 2줄 3줄 이렇게 넘어가게 된다면 소괄호 () 로 return 값을 감싸주면 된다.
위의 코드를 가지고 이제 글 제목에 적힌 개수만큼 반복해서 글을 보여주려면 아래와 같이 해주면 된다.
{
글제목.map(function(){
return (
<div>
<h1>{글제목[1]}</h1>
{글제목2[1]}
</div>
)
})
}
다만 위의 코드처럼 작성하게 되면 같은 글만 반복해서 보이기 때문에
// 아래처럼 작성하게 되면 article에 있는 데이터를 받아서 출력하게 되며
{
글제목.map(function(article){
return (
<div>
<h1>{article}</h1>
<hr />
</div>
)
})
}
// 여기서 파라미터으로 article 다음에 하나 더 넣게 되면
// 반복문을 돌 떄 마다 0부터 1씩 증가하는 정수를 받을 수 있게 된다.
// 그래서 사전에 정의했던 글제목2인 날짜를 함께 출력하게 되면
// 아래와 같이 할 수 있다.
{
글제목.map(function(article,i){
return (
<div>
<h1>{article}</h1>
<p>생성 날짜: {글제목2[i]}</p>
<hr />
</div>
)
})
}
그래서 정리하자면
map() 함수는
- 왼쪽 array 자료만큼 내부코드를 실행
- return 오른쪽에 있는걸 array로 담아준다.
- 유용한 파라미터 2개 사용가능
그래서 비슷한 HTML을 반복하여 생성하려면 map()을 쓰면 된다.
과제 따봉 갯수를 개별로 기록하기
여기서 에러 표시는 key의 고유값을 정해주지 않았기 때문이기에
- key=”html 마다 다른 숫자” 를 넣어주면 된다.
//우선 똑디 기억하자!!
// state에 정의했던 array의 값을 변경할 경우 해당 array를 새로운 변수에 deep copy를 한 후
// 변경해야만 해당 값에 접근하여 변경할 수 있따.
// 또한 onclick={안에는 함수를 작성해야하기에 }
// onclick={()=> {}} <== 이렇게 작성해야 한다는 점.
{
글제목.map((article,i)=> {
return (
<div>
<h1>{글제목[i]} <span onClick={()=> {
let up = [...따봉]
up[i] += 1
따봉변경(up)
}}>👍</span> {따봉[i]}</h1>
{글제목2[i]}
</div>
)
})
}
'React' 카테고리의 다른 글
| React - 실시간 동작을 처리하기 위해 사용되는 라이브러리 및 도구 (0) | 2024.07.06 |
|---|---|
| React - 프로젝트 셋팅 (PWA, Tailwind, Router, Axios, Redux-Toolkit) (0) | 2024.02.20 |
| React Part 1 - Step 4 (0) | 2023.06.25 |
| React Part 1 - Step 3 (0) | 2023.06.25 |
| React Part 1 - Step 2 (0) | 2023.06.25 |