박허디의 개발블로그

2023.09.01 - [공부/React] - 리액트/React state 문법 (1) 리액트/React state 문법 (1)시작 전에 먼저 왜 state를 쓰는지 알고 가자 굳이 state에 자료를 넣지 않고 변수에다가 자료를 넣어줘서 띄워줄 수도 있는데 굳이 state를 쓰는 이유는 밑에 잠깐 보이는 사진에 let post = '강남 가락herniateddisc-park.tistory.com이 글에 이어서 state문법과 Onclick 문법을  알아보자 Onclick은 html요소를 클릭했을 때 내가 원하는 자바스크립트를 실행시켜 주는 거다이를 위한 예시로 좋아요 같은 기능을 구현해볼 건데버튼을 하나 누르면 옆에 잇는 숫자가 올라가게 할 거다  먼저 누를 수 있는 버튼을 만들건대 button이라고 ..

시작 전에 먼저 왜 state를 쓰는지 알고 가자굳이 state에 자료를 넣지 않고 변수에다가 자료를 넣어줘서 띄워줄 수도 있는데 굳이 state를 쓰는 이유는밑에 잠깐 보이는 사진에 let post = '강남 가락국수 맛집';이라고 저장해 놨는데이게 하드코딩으로 해놓은 게 아니라 어디서 정보를 가져오는 거라고 생각해 보자 어느 날 정보가 바뀌어서  강남 가락국수 맛집에서 역삼 우동 맛집으로 바뀌면 let post = '역삼 우동 맛집'; 이런 식으로 바뀐다고 생각하면 되는데 여기서 바뀐 값이 자동으로 html에 적용되지 않는다 하지만 state를 쓰면 state를 쓰고 있던 html은 자동으로 재렌더링이 된다 그래서 자주 바뀌는 정보 같은 경우는 변수에 저장하는 것이 아니라 state에 저장해서 이용해..

JSX란 ?간단하게 말하자면 JS파일에서 HTML문법을 쓸 수 있게 해주는거  JSX 문법 1 ) 보통 html에서는 태그에 class를 입혀서 이름을 주는데 jsx에서는 className이라고 해야됨이런식으로 className="black-nav" 를 해서  css 폴더에 .black-nav를 설정해주고 저장해주면  이렇게 정상적으로 적용이 됨.   JSX 문법 2 ) 하드코딩으로 이름이나 이런 걸 설정해줄 수 있지만변수에 들어있는 데이터를 내가 원하는 장소에 넣고 싶으면 {} 를 입력해서 {}안에다가 데이터가 들어있는 변수명을 넣어주면 된다.    간단하게 예시로 post에 강남 우동 맛집이라고 넣어준 후  div 태그 안에{post}를 입력해주면 이렇게 잘 나오는 모습을 볼 수 있다. +) 클래스명..