react 3

[React] 리액트/React state 문법 (1)

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

study/react 2023.09.01

[React] 리액트/React JSX 문법 3가지

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

study/react 2023.08.31

[macOS] macOS 리액트 초기설정

처음 시작 할 때 인터넷에 들어가서 node.js 입력 후 홈페이지에 들어가 보면 이런 식으로 나오는데 왼쪽에 있는 거 다운로드하고그 후 인터넷창에 VSC입력해서 다운로드하여 주자 나는 맥이어서 맥버전을 다운로드하였다.  전부다 다운로드하고 나서 먼저 바탕화면에 프로젝트 위한 파일을 하나 만들어줘야 된다 react공부할 거니까 간단하게 파일이름 react로 설정해서 만들어 줬다.그리고 맥 기준으로 파일에 마우스를 올리고 오른쪽 클릭을 하면이런 게 나올 텐데 여기서 서비스 -> 폴더에서 새로운 터미널 열기를 눌러준다. 이런 화면이 나오면 npx create-react-app 프로젝트명 이런 식으로 입력해 주면 되는데 나는 프로젝트명을 blog라고 할 거니까 npx create-react-app blog이라..

study/macOS 2023.08.31