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 |