갑자기 리액트는 왜요?
유니티만 하니깐 프로젝트가 없으면 할만한게 없어요
그래서 시작하게 된것이 바로 리액트다! 이제 리액트를 공부하면서 할 프로젝트가 생기면 다시 유니티하다 비는 시간엔 다시 리액트를 공부해 프론트까지..는 아니고 그냥 취미용으로 배우는 것이므로 말 그대로 비는 시간을 사용하기 위해 배우는 것이다.
이 짤처럼 그냥 내가 하고 싶어 하는거니 사싫 이유는 없는 것이다. 서론이 길었으니 이제 시작해보자.
자 리액트를 시작하기전 필요한 것은 VSC(Visual Studio Code), Node js가 사실상 끝이다. 왜 그런진 모르겠지만 이것만 있으면 시작이 되는것 같은데..?
빈 폴더를 만들고 Shift+우클릭을 하면 윈11기준으로 "터미널에서 열기" 이것을 열고 이 커맨드만 쳐주면 된다
npx create-react-app "프로젝트 이름"이런식으로 뜨면 자동으로 본인이 설정한 프로젝트 이름이 뜨며 기본 설정된 폴더가 생성이 된다. 이 폴더를 가지고 이제 시작을 하면 되는데 만약 에러가 뜬다면
npm install -g create-react-app을 입력해주면 자동으로 설치되며 해결이 되는 것 같다, 필자도 저거로 해결했음
이제 vsc를 만들어진 폴더를 열면되는데 열어서 처음에 건들건 src에 있는 App.js와 App.css만 건들면 된다. 이제 VSC창에 있는 Terminal -> New Terminal를 눌러 터미널에
npm start이 문구를 쳐주면 새로운 인터넷창이 뜰 것이다.
이런식으로 뜨면 성공이다. 이제 우리는 App.js파일안에서 App펑션에 있는 return에만 jsx라는 문법으로 html을 적을 수 있다. p부분에 우리가 원하는 글을 적으면 수정이 되는데
이렇게 말고 완전 하얀 부분에서 시작하고 싶다면
<div className="App">부분만 두고 다 지우면 된다. 이제 여기다가 div나 p태그 같은 html을 넣으면 되는데 만약 css를 건들고 싶다면 App.css에다가 수정하면 되지만 클래스 선언은 흔히 알던 class가 아닌 className으로 선언해줘야 나중에 헷갈리지 않는다. 프로그래밍 class와 헷갈림 주의
그리고 본인이 문자열 변수를 만들었는데 이것을 사용하고 싶다? 그러면
<p>{ 변수명 }</p>이런식 사용하면 변수에 저장된 문자열을 사용하여 화면에 띄울수 있다.
그리고 css파일을 사용하지 않고 스타일을 사용하려면
<h4 style={{Color:'Yellow'}}>안녕하세요</h4>이런식으로 사용하면 된다. 다른 css문법을 사용하고 싶다면 Color:'Yellow'뒤에 쉼표를 넣고 다른 css문법을 넣으면된다.
마지막으로 Usestate인데 이건 Usestate를 임포트로 받아와 변수로 지정할 수 있다. 변수 지정방법은
let [변수명, 변수지정 명] = Usestate('문자열');이런식으로 사용을 할 수있다. 이렇게 사용하려면 위에 말한것 처럼
<p>{ 변수명 }</p>위처럼 사용하면 그대로 사용이 된다. 위에 말한 Usestate안에서 배열로 사용할 수 있으면서 다른 변수보다 더 효율적으로 사용이 가능하다.
github link : https://github.com/gunggme/CodingApple_React
