코딩애플 강의들으면서 정리 한것
JSX 문법1. html에 class 넣을 땐 className
JSX 문법2. 변수를 html에 꽂아넣을 때는 {중괄호}
자바스크립트 변수같은 곳에 있던 자료를 html 중간에 꽂아서
보여주고 싶을 때가 많습니다.
function App() {
let post = '강남 우동 맛집';
return (
<div className="App">블로그임
여기에 저 변수에 있던거 꽂고 싶으면?
{post}
JSX문법 3.
글씨
- { 속성명: '속성값' }
- font-size 처럼 속성명에 대쉬기호를 쓸수 없음
중요한 데이터는 변수말고 state에 담습니다.
변수 말고 state에 데이터 저장해서 쓰는 이유
state는 변동사항이 생기면 state 쓰는 html도 자동으로 재렌더링해줍니다.
자주 변경 될것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩}
- 변경할 일이 없는 데이터들
- 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장해도 됩니다.
버튼에 기능개발을 해보자 & 리액트 state 변경 하는 법
버튼을 누르면 첫 글 제목이 '여자 코트 추천'으로 바뀌는 기능의 버튼
onClick 사용법
- Click이 대문자인거
- {} 중괄호 사용하는거
- 그냥 코드가 아니라 함수를 넣어야 잘 동작한다는거
함수 만드는게 귀찮다
{ 실행할 코드}}>
(매우중요) state 변경하는 법
좋아요 버튼 누르면 따봉이라는 state를 +1 해주고 싶으면
코드를 어떻게 짜죠?
* state는 state변경함수를 써서 state를 변경해야 합니다
1. 클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용합니다
2. state를 변경하시려면 state 변경함수를 이용
state 변경함수는 () 안에 입력한걸로 기존 state를 갈아치워줍니다.
never stop