React 1. Blog(1)

khxxjxx·2021년 6월 7일
0

애플코딩

목록 보기
2/8

1. Blog(1)

deep copy

  • state는 직접 수정할 수 없기때문에 복사본을 만들어서 수정한다
  • 자바스크립트 내에서 array나 object 자료형을 = 등호로 복사하면 각각 별개의 자료형이 생성되는게 아니라 값을 공유한다

spread 연산자

  • array나 object 자료형 왼쪽에 붙일 수 있으며 중괄호나 대괄호를 벗겨달라는 뜻
  • 다른용도로 array나 object 자료형을 shallow/deep copy할 때 많이 사용한다
// 예시

...[1, 2, 3]  // 1,2,3

let 새로운배열 = [...원본배열]  // 원본배열을 copy한 독립적인 새로운배열 생성

component

  • return 안에는 하나의 태그만 사용할 수 있기때문에 여러개의 태그가 있으면 하나의 태그(ex. <div>)로 묶어줘야한다
  • 의미없는 div를 쓰기 싫으면 <> </> 이걸로 묶어줘두 된다
  • component를 이용하면 복잡한 HTML들을 한단어로 치환할 수 있다 (관리가 쉽다)
  • component 이름을 지을땐 영어대문자로 시작한다

component 만들기

  • function을 이용해 함수를 만들고 이름을 만들어준다
  • 함수의 return() 안에 축약을 원하는 HTML을 담아준다
  • 원하는 곳에 <함수이름 /> 이라고 사용해주면 축약한 HTML이 그 자리에 나타난다

component로 만들면 좋은 것

  • 사이트에 반복해서 출현하는 HTML 덩어리들
  • 자주 변경되는 HTML UI들
  • 다른 페이지를 만들때

component 단점

  • state 쓸 때 복잡해진다
  • 상위 component에서 만든 state를 쓰려면 props 문법을 이용해야 한다

조건문

삼항연산자

  • JSX 안의 {} 중괄호 내에서 if문을 사용할 수 없기때문에 if문 대용역할을 할 수 있는 삼항연산자를 사용
  • null : 리액트에서 텅빈 HTML을 의미
// 예시

조건식 ? 조건이 참일 때 실행할 코드 : 조건이 거짓일 때 실행할 코드
profile
코린이

0개의 댓글