FE RYAN
완벽하지 않으면 어때
FE RYAN
전체 방문자
오늘
어제

블로그 메뉴

  • 💾 깃허브 링크
  • 홈
  • 태그
  • 분류 전체보기 (151)
    • 개인프로젝트 (8)
      • 개인 포트폴리오 웹앱 (6)
      • 프론트엔드 기술면접 아카이빙 웹앱 (2)
    • 기록 (121)
      • 원티드 프리온보딩 인턴십 (0)
      • 코드스테이츠 프론트엔드 (75)
      • 생각들 (3)
      • Today I learned (32)
      • 회고 (9)
      • 리뷰 (1)
    • 개발 (17)
      • React (3)
      • Javascript (7)
      • CSS (1)
      • HTML (3)
      • HTTP (1)
      • 자료구조 (0)
      • 알고리즘 (2)
    • 코딩테스트 (2)
      • 백준 (2)
      • 프로그래머스 (0)
    • 디자인 (1)
      • UI & UX (1)
    • 수학 (0)
    • 자기계발 (0)

공지사항

인기 글

태그

  • seb 39
  • 자바스크립트 딥다이브
  • useMemo
  • 코드스테이츠
  • 리액트
  • 원시타입
  • Til
  • 부트캠프
  • 신입개발자
  • 메인프로젝트
  • 자바스크립트
  • ES6
  • 프론트엔드
  • HTML
  • 타입스크립트
  • 포트폴리오
  • seb39
  • 딥다이브
  • 회고
  • css

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
FE RYAN

완벽하지 않으면 어때

개발/React

[React] JSX문법

2022. 3. 23. 11:01
728x90

class는 자바스크립트 예약어이므로 태그에 클래스 부여시 className="" 으로 작성.
속성값으로 변수를 넣는것도 가능. <div className={lists}>

인라인 스타일 적용시 유의사항 2가지
1. 속성 이름은 카멜케이스로 작성
JSX는 자바스크립트 기반이므로 - 같은 기호를 쓰게되면 연산자로 보므로 태그에 인라인 스타일 적용시 font-size 같은 방식으로 쓸 수 없음. fontSize 이렇게 style 속성도 카멜케이스로 입력해야함. 복잡하게 인라인스타일 주지 말고 css는 css파일에 적고 연동하자.
2. 속성은 객체 리터럴 방식으로 작성. { key : value }
<div style={ { color : 'white', fontSize : '30px' } }>

onClick의 속성값은 반드시 중괄호로 감싼 함수가 들어가야 함.
1. onClick={ function() { 1 + 1 } } // 일반적인 익명함수
2. onClick={ () => { 1 + 1 } } // 화살표함수
3. onClick={ preStatedFunc } // 외부에서 미리 선언된 함수

state 사용하기
state는 변수처럼 데이터를 저장할 수 있는 공간이다. 변수와 다른 점은 state의 값이 변경되어도 페이지가 새로고침 되지 않고 재렌더링되어 변경된 내용이 새로고침 없이 반영된다는 점이다.
state의 값을 변경시 반드시 변경함수를 사용해서 변경해야만 정상적으로 재렌더링된다.
-> 변경함수명('변경할 내용');

728x90
저작자표시 비영리 변경금지 (새창열림)

'개발 > React' 카테고리의 다른 글

useMemo  (0) 2022.07.27
[React] Redux 상태관리  (0) 2022.07.09
    '개발/React' 카테고리의 다른 글
    • useMemo
    • [React] Redux 상태관리
    FE RYAN
    FE RYAN

    티스토리툴바