React 공부 이것저것...

Suyo·2025년 1월 19일
0

1. 중요한 데이터는 state에 담자

function App(){
 
  let [글제목, b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>{ 글제목 }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

위 코드에서 useState를 통해 데이터를 받아와서 '글제목'에 값을 넣는다. 이런 식으로 변수를 사용하지 않고 state를 사용해서 자료를 저장할 수 있다.

let [글제목, b] = useState('남자 코트 추천')에서 b가 뭐지??
useState()를 쓰면 그 자리에 [데이터1, 데이터2] 이렇게 생긴 이상한 array가 남는다. 데이터1 자리엔 '남자 코트 추천'같은 자료가 들어있고, 데이터2 자리엔 state변경을 도와주는 함수가 들어있다. 그 데이터들을 각각 변수로 빼고 싶으면 let [글제목, b] = useState('남자 코트 추천')이러면 된다.

변수가 아니라 state에 데이터를 저장해서 쓰는이유는 뭘까?
변수와는 다르게 state는 변동사항이 생기면 state쓰는 html도 자동으로 리렌더링 해준다. 또한 UI 기능 개발이 매우 편리해지고, 사이트가 부드럽게 작동하도록 도와준다.

하지만 로고나 잘 변화하지 않는 데이터들은 state로 만들어서 데이터바인딩을 할 필요가 없다. state는 상품명, 글제목, 가격 이런것 처럼 자주 변할 것 같은 데이터들을 저장하는 것이 좋다.

2. onClick을 사용해서 이벤트 만들기

버튼을 누르면 좋아요 갯수가 1씩 증가하는 기능을 만들자.
1. 먼저 state를 만들어 데이터바인딩하자.

function App(){
  
  let [따봉] = useState(0);
  return (
     <h4> { 글제목[0] } <span>👍</span> { 따봉 }</h4>
  )
}
  1. onClick={ } 함수를 이용해서 이벤트를 발생 시키자.
function App(){
  
  function testFunction(){
    console.log(1)
  }
  return (
    // JSX에서 onClick 사용시 유의점
    // 1. Click이 대문자이다.
	// 2. {} 중괄호 사용한다.
	// 3. 그냥 코드가 아니라 함수를 넣어야 잘 동작한다.
    <div onClick={testFunction}> 안녕하세요 </div>
  )
}

function을 따로 빼서 사용하기 싫다면 onClick안에 함수를 넣을 수도 있다.

<div onClick={ function(){ 실행할코드 } }> 
<div onClick={ () => { 실행할코드 } }>

⭐ 3. state 변경하기

state 변경함수를 사용해서 state를 변경해야 한다.

function App(){
  
  let [ 따봉 ] = useState(0);
  return (
    <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉 = 따봉 + 1 } } >👍</span> { 따봉 }</h4>
  )
}

위와 같이 { 따봉 = 따봉 + 1 }은 사용 불가!

state 변경함수

let [ state, setState ] = useState(0);

위 코드에서 setState부분이 state 변경함수 이다.
setState(1)을 작성하면 state는 1이 되고, setState(100)을 작성하면 state는 100이 된다.

4. array/object 자료에서 state 수정

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학'])
    } }> 수정버튼 </button>
  )
}

위와 같은 코드로 작성해도 작동은한다. 하지만 확장성이 떨어진다. 때문에 아래와 같은 코드가 추천된다.

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
    	let copy = [...글제목];
    	copy[0] = "여자코트 추천";
    	글제목변경(copy);
    } }> 수정버튼 </button>
  )
}

5. state 변경함수 동작원리

state 변경함수를 쓸 때 기존 '기존state === 신규state' 와 같이 먼저 검사해보자. 만약 같다면 state 변경을 해주지 않는다.
'let copy = state' 도 마찬가지로 copy와 state가 같아서 변경을 안해준 것이다. copy와 state안의 자료가 다른데 왜 같다고 하는것일까? 그 이유는 다음과 같다.
자바스크립트로 arr를 하나 만들어 보자. [1, 2, 3]은 ram에 저장이되고 arr에는 그 자료가 어디에 있는지를 알 수 있는 경로만 가지고 있다. 때문에 aray/object 자료를 복사를 하면 문제가 생긴다.

let data1 = [1,2,3];
let data2 = data1;

위 코드에서 문제를 확인할 수 있다. data1과 data2는 [1,2,3]값을 저장하는게 아니라, 경로를 가지고 있을 뿐이다. 때문에 data1과 data2는 같은 값을 공유하게 된다. 이러한 이유로 data1을 변경하면 data2도 자동으로 변경된다.
때문에 array/object 자료를 복사하려면 [...state] 같은 방식을 사용해야 한다.

let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy)

... 이 뭘까?
spread operator라고 하는 문법으로 array/object 자료형 왼쪽에 붙일 수 있고, 괄호를 벗겨주세요 라는 뜻이다.
...[1,2,3]은 1,2,3와 같다. 때문에 ...[]을 사용하면 괄호를 벗기고 다시 array를 만들어주세요 라는 말이 된다. 이렇게 복사를 하면 다른 경로를 가리키는 완전히 독립적인 array 복사본을 생성해 줄 수 있다

6. HTML코드에서의 유의점

return(
  <div></div>
  <div></div>
)

위 코드처럼 return ()안에 두개의 html 태그를 나란히 적을수 없고 하나의 태그로 시작해서 하나의 태그로 끝나야한다.

return(
  <div>
    <div></div>
    <div></div>
  </div>
)

다음과 같이 하나의 div로 감싸야 한다. 의미없는 div를 쓰기 싫다면 fragment 문법인 <></>로 감싸도 된다.

return(
  <>
    <div></div>
    <div></div>
  </>
)

7. 복잡한 html을 한 단어로 치환할 수 있는 Component 문법

React는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다. 이를 Component라고 한다.

function App (){
  return (
    <div>
      (생략)
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

위와 같이 HTML을 한 단어로 줄일 수 있다. 줄이는 방법은 다음과 같다.
1. function을 이용해서 함수를 하나 만들어주고 작명한다.
2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 된다.
3. 그럼 원하는 곳에서 <함수명></함수명> 사용하면 아까 축약한 HTML이 등장한다.

Component 만들 때 주의점
1. component 작명할 땐 영어대문자로 보통 작명한다.
2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없습니다.
3. function App(){} 내부에서 만들면 안된다. component 안에 component 를 만들진 않는다.
4. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 된다.

어떤 HTML들을 Component 만드는게 좋을까?
관습적으로 컴포넌트화 하는 경우는 다음과 같다.

  • 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋다.
  • 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋다.
  • 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는게 좋다.
  • 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도 한다.

8. 동적인 UI 만드는 step

  1. html css로 미리 UI 디자인을 마치기
  2. UI의 현재 상태를 state로 저장해두기
  3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성하기

모달창 기능을 만들면서 실습해보자!

1. html css로 미리 디자인

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
}

2. UI의 현재 상태를 state로 저장

let [modal, setModal] = useState(false);

모달창은 열림/닫힘 두개의 상태밖에 없기 때문에 boolean 타입으로 작성을 해보겠다.

3. state에 따라서 UI가 어떻게 보일지 작성

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div className="app">
      (생략)
      {
        modal == true ? <Modal/> : null
      }
    </div>
  )
}

9. 많은 div들을 반복문으로 줄이고 싶을때 map을 사용

html이 반복적으로 출현하면 반복문을 이용해서 똑같은 html을 생성할 수 있다. for반복문은 JSX 중괄호 안에서 사용할 수 없어서 map()을 대신 사용한다.
모드 array자료 우측에 map() 함수를 붙일 수 있다.

1. array에 들어있는 자료 갯수만큼 그 안에 있는 코드를 반복 실행한다.

var arr = [2,3,4];
arr.map(function(){
  console.log(1)
});

위 코드에서 arr의 자료 갯수가 세개 이므로 console.log(1)을 세번 실행한다.

2. 콜백함수에 파라미터를 아무렇게나 작명하면 그 파라미터는 array안에 있던 모든 자료를 하나씩 출력해준다.

콜백함수란?
다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수이다.

var arr = [2,3,4];
arr.map(function(a){
  console.log(a)
});

위 코드에서는 arr의 자료인 [2, 3, 4]가 'a'로 들어가서 세번 실행된다. 실체로 콘솔창에서 2,3,4가 출력된다.

3. return에 값을 적으면 array로 담아주고, map() 쓴 자리에 넘겨준다.

var arr = [2,3,4];
var newArray = arr.map(function(a){
  return a * 10
});
console.log(newArray)

'a'에 arr의 자료인 [2, 3, 4]가 들어가고, return을 통해 newArray에 [20, 30, 40]이 들어가게 된다.

단순하게 반복문처럼 map() 을 사용할 수도 있다.

function App (){
  return (
    <div>
      { 
        [1,2,3].map(function(){
          return ( <div>안녕</div> )
        }) 
      }
    </div>
  )
}

위 코드는 세번 반복되어서 '안녕'이라는 글이 세번 출력된다.

10. props의 활용

자식 컴포넌트가 부모 컴포넌트의 state를 사용하고 싶을 때는 props를 활용한다.
modal 내부에 title state를 넣어보자.

function App (){
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>{ title[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

위와 같은 코드는 실행되지 않는다. title 변수가 function App()에 있기 때문이다.
위 그림과 같이 부모 컴포넌트 state를 자식 컴포넌트로 전송해 줄 수 있다. 그리고 이렇게 전송할 때 props라는 문법을 사용한다. 전송하는 방법은 다음과 같다.
1. 자식컴포넌트를 불러오는 곳에서 <자식컴포넌트 작명={state이름}/> 작성
2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props라는 파라미터 등록 후 props. 작명 사용
위와 같은 절차에 따라 코드를 작성한 예시는 다음과 같다.

function App (){
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal title={title}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.title[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
profile
Suyo
Mee-
이전 포스트

React 기초문법

다음 포스트

React의 Portals

0개의 댓글