React basics

Об этом предложении

React 왜 씀 single page application 을 편하게 만들기 위해 React 라는 자바스크립트 라이브러리 를 설치해 사용하는 것 이다. 비슷한 js라이브러리들이 많긴 하지만 가장 오래되었고 유저가 가장 많기에 리엑트를 쓴다(근-본). 장단점 장점 HTML 재사용의 편리함 컴포넌트 단위로 개발하기 때문에 여러 개발자들이 분업하기 좋음 React Native를 쓰면 리액트 비슷한 문법으로 모바일 앱개발도 가능 프론트엔드와 백엔드 파트를 완전히 분리해서 각각 개발가능 단점 많은 자바스크립트로 인해 웹페이지 크기가 커짐 웹페이지 로드시 HTML 내용물이 천천히 채워지기 때문에 SEO(Search Engine Optimization)에 악영향이 있을 수 있음 (hydration 작업 : html을 먼저보내고 자바스크립트를 연결한다) 간단한 사이트도 코드가 쓸데없이 복잡해짐 Single Page Application 말 그대로 서버에서 전체 페이지를 다시 불러오지 않고 html 한 페이지 만 써서 자바스크립트 로 현재 페이지를 동적으로 갱신한다. html 파일을 1개만 사용 다른 페이지를 보여주고 싶을 때 html 부분만 갈아치워서 보여준다 예) instagram 환경구성 nodejs 설치하면 npm 패키지 매니저가 같이 설치된다. => React 받기 편해짐 설치 후 프로젝트 경로에서 npm create vite@latest 하면 생성된다. npm run dev 개발 서버 실행한다. React 기초 문법 기초 jsx 문법 3개 프로젝트 생성시 주는 App.jsx에 작성해 보았다. function App(){ return ( <div className="App"> <div className="black-nav"> <h4>블로그임</h4> </div> </div> ) } 이런 식으로 div에 때려 넣는다 하지만 function App(){ return ( <div className="App"> <div className="black-nav"> <h4>블로그임</h4> </div> </div> <div> 안된다 </div> ) } 이건 안된다. return()안에는 하나의 div가 있어야 한다. 반환 할 때 div tag 하나만 반환하기 때문이다. import './App.css' 이런 식으로 css도 작성해서 적용이 가능하다. className 평소에는 class를 그냥 class로 넣었는데 className으로 넣어야 한다. => js에서 class를 써가지고 우리가 jsx에서 작성하고 있다는 사실을 망각하지 말자. 데이터 바인딩 문법 {} 거지같은 DOM에서 하나하나 queryseletor나 getElementById로 찾아서 수정하던 것은 잊어라 이건 jsx다. function App(){ let post = 'swap'; return ( <div className="App"> <div className="black-nav"> <div>swap</div> <div>{ post }</div> </div> </div> ) } 긴 말 필요없다. return() 밖에서 선언하고 안에 변수 명을 {}중괄호 안에 꼬라 박으면 값이 들어간다. function App(){ let post = 'swap'; return ( <div className="App"> <div className="{ post }"> <div>swap</div> <div>{ post }</div> </div> </div> ) } className에도 가능이 html에 style 속성 넣기 <div style="color : blue"> 이렇게 넣을 안일한 생각 하지마라 <div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div> 일단 - 이 기호도 못 쓰고 js에서 변수 선언할 때 마냥 대문자로 써서 붙여야 한다. 그리고 저렇게 오브젝트 형식으로 써줘야 하는데 그 이유는 JSX는 HTML이 아니라 JavaScript이기 때문이다. JSX는 빌드 시점에 결국 React.createElement() 같은 순수 JavaScript 코드로 변환된다. state 왜 씀 중요한 변수는 state에 담는다. state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해준다. function App(){ let post = 'swap' return ( <h4>{ post }</h4> ) } 이렇게 쓰면 코드를 더 짜야지 변경 내용이 보이는데 function App(){ let [글제목, b] = useState('swap'); return ( <h4>{ 글제목 }</h4> ) } state는 바뀌면 바로 적용 해준다. 선언 let [name, age] = ['swap', 18] array 안에 왼쪽 오른쪽 형식을 똑같이 하면 알아서 딱딱 들어가는 destructuring 문법을 사용해 선언한다. let [a,b] = useState('hello') useState()를 쓰면 [데이터1, 데이터2] 가 생기는데 데이터1 : 값 데이터2 : state변경을 도와주는 함수 가 남게 된다. state 변경 <div onclick="자바스크립트"> 일반 html 파일에선 이렇게 하면 된다. <div onClick={함수}> JSX에서는 이렇게 한다. function App(){ let [ 따봉, 따봉변경 ] = useState(0); return ( <h4> swap <span onClick={ ()=>{따봉변경(따봉+1)} } >👍</span> { 따봉 }</h4> ) } 이런 식으로 state를 변경 할 수 있다. 아까 데이터2에는 state 변경을 도와주는 함수가 들어간다 한 것을 기억한다면 이해가 어렵지 않을 것이다. function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( <button onClick={ ()=>{ let copy = [...글제목]; copy[0] = '여자코트 추천'; 글제목변경(copy) } }> 수정버튼 </button> ) } 또 다른 문자열 array를 갈아 끼우는 방식이다. state 자체를 변경하기에는 쓸모가 있을 수 있으니 보통 복사해서 많이 쓴다. 근데 잠깐 [...글제목] 너 뭐냐 let data1 = [1,2,3]; let data2 = data1; data2[0] = 1000; console.log(data2 === data1) true ??? 결론 부터 말하자면 data1과 data는 똑같은 값을 공유한다. 그래서 저런 괴랄한 결과가 나오는 것 이다. ... 이게 뭐냐 spread operator 라는 것 인데 ..[1,2,3] 이렇게 쓰면 그 자리에 1,2,3 이 남는다. 이렇게 하면 다른 복사본을 만들 수 있다. component 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있다. 줄이는 법 function을 이용해서 함수를 하나 만들어주고 작명한다. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담는다 그럼 원하는 곳에서 <함수명></함수명> 사용하면 아까 축약한 HTML이 나타난다. function App (){ return ( <div> (생략) <Modal></Modal> </div> ) } function Modal(){ return ( <div className="modal"> <h4>제목</h4> <p>날짜</p> <p>상세내용</p> </div> ) } 이런 식으로 function App (){ return ( <div> (생략) <Modal></Modal> <Modal></Modal> <Modal></Modal> <Modal></Modal> <Modal></Modal> <Modal></Modal> <Modal></Modal> <Modal></Modal> <Modal></Modal> <Modal></Modal> <Modal></Modal> <Modal></Modal> <Modal></Modal> </div> ) } function Modal(){ return ( <div className="modal"> <h4>제목</h4> <p>날짜</p> <p>상세내용</p> </div> ) } 으하하 function Modal(){ return ( <div></div> ) } let Modal = () => { return ( <div></div>) } 이런 방법으로도 만들 수 있다. 주의사항 component 작명할 땐 영어대문자로 보통 작명 return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없다. function App(){} 내부에서 만들면 안된다. function App(){} 이것도 다시보니 컴포넌트 생성문법, component 안에 component 를 만들진 않는다. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 된다 뭐 할때 씀 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋다. 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋다. 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는게 좋다. 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도 한다. 함수문법도 긴 코드 축약할 때 다른 곳에서 코드 재사용할 때 복잡한 코드를 작은 기능으로 나눌 때 컴포넌트는 그냥 함수 문법이랑 똑같아서 용도도 똑같다. 단점 관리가 힘들어질 수도 있고 안에 state 쓰기가 불편하니 필요할 때만 사용하자. 동적 UI 만들기 3step 예시로 글자 같은거 클릭시 글이 사라졌다 나타났다 하게 만들어 보자. 1. html css로 미리 UI 디자인 function Modal(){ return( <div className='modal'> <h4>제목</h4> <p>날짜</p> <p>상세내용</p> </div> ) } 예를 들어 이딴걸 만들었다 치자 2. UI의 현재 상태를 state로 저장 state 하나 만들고 거기에 현재 UI의 상태정보를 저장 let [modal, setModal] = useState(false); let [modal, setModal] = useState('닫힘'); let [modal, setModal] = useState(0); // 이런 식으로 아무렇게나 지정해도 상관없다. 3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 let [modal, setModal] = useState(false) <div className='list'> <h4 onClick={()=>{setModal(modal == true? false:true)}}>{글제목[2]}<span>👍</span>0</h4> <p>2월 17일 발행</p> </div> { modal == true ? <Modal/>:null } 나의 경우 조건식을 사용하여 true 일때 모달이 보이고 false라면 null로 비워두게 만들었다. map .map 이런 식으로 array 옆에 붙이는 js 기본 함수다 기능 array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행한다. var 어레이 = [2,3,4]; 어레이.map(function(){ console.log(1) }); 콜백함수에 파라미터 아무렇게나 작명하면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해준다. var 어레이 = [2,3,4]; 어레이.map(function(a){ console.log(a) }); return 오른쪽에 뭐 적으면 array로 담아주고 map() 쓴 자리에 남겨준다 var 어레이 = [2,3,4]; var newArray = 어레이.map(function(a){ return a * 10 }); console.log(newArray) html복사 이를 이용하면 이런 식으로 html 복사 가능하다 function App (){ return ( <div> { [1,2,3].map(function(){ return ( <div>말하면500만원</div> ) }) } </div> ) } map()의 기능들을 이용하면 다음과 같은 것들도 가능해진다 function App (){ return ( <div> (생략) { 글제목.map(function(a){ return ( <div className="list"> <h4>{ a }</h4> <p>2월 18일 발행</p> </div> ) }) } </div> ) } function App (){ return ( <div> (생략) { 글제목.map(function(a, i){ return ( <div className="list"> <h4>{ 글제목[i] }</h4> <p>2월 18일 발행</p> </div> ) }) } </div> ) } 이런 식으로 function에는 인자들을 넣어서 리스트 값들을 복사해와 하나씩 증가해 따로따로 바꿀 수도 있다. { 글제목.map(function(a, i){ return( <div className='list' key={i}> <h4>{글제목[i]}<span onClick={() => {엄지변경((이전엄지)=>{const 새엄지 = [...이전엄지];새엄지[i] += 1; return 새엄지;})}}>👍</span>{엄지[i]}</h4> <p>2월 17일 발행</p> </div> ) }) }