강의 내용 정리 (기초)

기초 파트 들으면서 정리해놨던 것들!

---

1. React를 사용하는 이유

1. Single Page Application 만들 때 사용
   -> 새로고침 없이 부드럽게 페이지 이동
2. html 재사용 편리
3. 같은 문법으로 앱 개발 가능
   
   

 

2. React 레이아웃 만들 때 쓰는 JSX 문법 3

1. html에 class 넣을 땐 className (class는 js의 예약어)
2. html에서 변수를 사용할 때는 {} 중괄호 (데이터 바인딩)
3. html에 style 속성 넣을 때는 style={{color:'blue', fontSize:'30px'}}
   
   

 

3. useState

• 중요한 데이터는 변수 말고 state에 (자료를 잠깐 저장할 때에는 변수)
• 변수가 있는데 굳이 state를 쓰는 이유
  -> 값이 바뀌면 html이 자동으로 재랜더링 됨
• state는 언제 써야 하는가?
  -> 변동 시 자동으로 html에 반영되게 만들고 싶을 때

++ Destructuring 문법

• 왼쪽과 오른쪽의 형태 맞춤

let [a, c] = [1, 2];

 

 

4. onClick()

• 이벤트 리스너에는 아무 값이나 넣을 수 없고 함수를 만들어서 함수 이름을 넣어줄 수 있음
• 함수 식 자체도 가능
• onclick = {} 중괄호 안에는 함수를 넣어야 함

onClick={function(){console.log(1)}}
onClick={()=>{console.log(1)}}

 

 

5. state 변경하는 방법

• 이벤트 리스너 안에서 state 값으로 변경하는게 아니라 state 변경 함수를 사용해야 함

state변경함수(새로운state값)

• state는 변수 = 변수 + 1 처럼 등호로 변경하는 것이 불가능함
• 값이 바뀔 수는 있으나 html에 반영되지 않음
• 사용할 함수명의 파라미터 자리에 변경될 식을 넣어줌

<span onClick={() => count(like + 1)}>👍</span> {like}

• 함수명은 선언 시 정함

let [like, count] = useState(0);

 

 

6. Array, object

• array나 object는 원본을 보존하는 것이 좋음

      <button
        onClick={() => {
          let copy = [...title]; //[...]
          copy[0] = "여자 코트 추천";
          updateTitle(copy);
        }}
      >

 

 

7. Component

• 많은 div 들을 한 단어로 줄일 수 있음
• 컴포넌트 만드는 방법 3
  1. function 만들고 (여기서 func의 위치는 메인 func 밖)
  2. return() 안에 html 담기
  3. 사용할 func에 <함수명/> 써서 사용
• 컴포넌트를 만드는 문법 (참고)
  • 변수를 먼저 선언하고 함수 만듦
  • const를 사용하는 이유 -> Modal=123;처럼 실수했을 때 에러메세지 출력

  const Modal = () => {
  	return {
  		<div></div>
  	}
  }
  

• return() 안에 html 병렬 기입하고 싶다면 <></>로 묶어주기
• 컴포넌트를 가져다 쓸 때는 <함수명></함수명>, <함수명/> 둘 다 가능
• 컴포넌트로 만들면 좋은 것들
  1. 반복적인 html
  2. 큰 페이지
  3. 자주 변경되는 것들
• 컴포넌트의 단점
  • state를 가져다 쓸 때 문제 생김
  • 사용할 state가 다른 function에 있어서 ㅇㅇ
• 리액트에서 대문자로 시작하는 코드가 있다면 컴포넌트라고 봐도 됨
  
  **state는 state를 사용하는 컴포넌트들 중 최상위 컴포넌트에서 만들어야 함
  
  

 

8. 동적인 ui 만드는 3step

1. html css로 미리 디자인 완성
2. ui의 현재 상태를 state로 저장
3. state에 따라 ui가 어떻게 보일지 조건문 등으로 작성
   
   

 

9. if 조건문 대신 삼항연산자

• {} html 코드에서 {} 중괄호 부분은 js 코드를 적는 부분
• {} 안에는 if, for 등의 조건문을 적을 수 없음

 

10. map()

• 반복문 없이 html 반복 생성
• {} 중괄호 안에서는 반복문 사용 불가능하기 때문에 map() 사용

map() 함수

• 왼쪽 array 자료만큼 내부 코드 반복 실행
• return 오른쪽에 있는 걸 array에 담아줌
• 유용한 파라미터 두 개 사용 가능

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

• 실제 글 갯수만큼 html 생성하는 방법
  -> array 자리에 글 제목 배열을 넣음
• 글 제목 제대로 출력하는 방법
  -> 변수는 map() 앞의 배열을 갖고 있기 때문에 임의로 매개변수명 지정해서 자리에 넣어줌
• function에서 두 번째 파라미터는 반복문 돌 때마다 0부터 1씩 증가하는 정수

{title.map(function (contents) { // 매개변수에 i 추가
        return (
          <div className="list">
            <h4>{contents}</h4> // title[i]
            <p>08월 23일 발행</p>
          </div>
        );
})}

11. props

• 자식이 부모의 state를 사용할 수 있음
• 자식 컴포넌트에서 부모 컴포넌트의 state를 사용해야 할 때
• 부모 컴포넌트는 자식 컴포넌트에세 state를 전송해 줄 수 있음

props 사용법 2 step

• 부모 -> 자식 state 전송하는 법

1. <자식컴포넌트작명={state이름}>
2. props 파라미터 등록 후 props.작명 으로 사용

    // 부모 컴포넌트
    // title={title}로 보냄
      {modal == true ? <Modal title={title} /> : null}

    // 자식 컴포넌트
    // {props.titlt} 로 사용
function Modal(props) {
  return (
    <div className="modal">
      <h4>{props.title}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

12. input, button 태그를 이용한 새로운 글 추가

• input 값을 가져오기 위해 e.target.value 사용
• 파라미터 e는 이벤트 객체, 이벤트에 관련된 여러 기능이 담겨 있음
• e.target (이벤트가 발생한 곳)
• e.target.value (input에 입력한 값)
• 이벤트 버블링을 막고 싶다면 e.stopPropagetion() 사용

    <span
      onClick={(e) => { // e 추가
        e.stopPropagation(); // 추가
        let copy = [...like];
        copy[i] = copy[i] + 1;
        count(copy);
      }}
    >
      👍
    </span>{" "}

 

• 유저가 입력한 input값은 보통 변수나 state에 저장한 후 필요한 곳에 사용
• (참고) state를 변경하는 것은 처리 속도가 느려서 다음 라인부터 실행되기도 함