리액트 랜덤 명언 앱 만들기

create react app을 이용해서  랜던 명언 앱 만들기!

 

먼저 내 터미널에 git, node, npm이 잘 설치되어있나 확인한다.

>--version을 이용해 버전을 확인하면 알수 있음.

저는 옛날 버전을 사용하고있네요.. node가 최신이 14정도되는걸로 알고있는데..

 

그리고 명언앱을 만들 폴더를 하나 만들기.

폴더만들기 mkdir 원하는폴더명

 

나는 mkdir random 으로 랜덤폴더를 생성.

생성한 폴더에 create reacr app 설치

 

npx create-reacr-app 프로젝트명을 입력하면

뭔가가 계속 설치됨.

 

 

설치가 끝나고 확인해보면 내가 입력했던 프로젝트명으로 폴더가 생기고

그 폴더안에 필요한 모든것들이 설치되어있다.

vs코드로 폴더를 열어보면, 이러한 모습.

노드모듈폴더는 우리가 리액트 개발할때 사용하는 패키지가 저장되어있고,

패키지에 대한설명은 패키지json에서 확인할 수 있다.

가장 자주 사용하게 될부분은 start속성인데

react-scripts start를 대체하여 npm run start 를 사용할 수 있다.

 

터미널에 npm run start를 입력하면, 

이렇게 리액트가 실행되는 새창이 뜬다. 

 

다시 vs코드로 돌아와 src폴더를 확인해보면 (src는 소스의 약자)

우리가 프로젝트를 만들기위해 사용할 필수적인 요소들이 들어있다.

index.js부터 살펴보자.

가장 상단에 import라는 키워드가 있는데 import를 통해 node.js에 설치된 패키지를 불러오거나

src에있는 js파일을 불러온다.

그 아래 ReacrDOM.render의 기능은.

document.getElementById를 이용해 html에 접근하여, 

우리가 개발한 엘리먼트를 html에 넣는다.

---

이제 App.js를 통해 랜덤명언앱을 만들어보자.

내가 넣고싶은 명언을 인터넷에 검색해 아무거나 가져오자.

나는 공부자극명언..을 넣겠다. >> 배열로 넣는다. 

 

공부자극명언

백만 가지 사실을 머릿속에 집어넣고도 여전히 완전히 무지할 수 있다 강력한 이유는 강력한 행동을 낳는다, 젊었을 때 배움을 게을리 한 사람은 과거를 상실하며 미래도 없다, 교육의 목적은 비어 있는 머리를 열려 있는 머리로 바꾸는 것이다., 지식을 얻으려면 공부를 해야 하고, 지혜를 얻으려면 관찰을 해야 한다. 행동의 가치는 그 행동을 끝까지 이루는 데 있다,한 사람에게서 모든 덕을 구하지 말라. 

 

앱함수안에 변수를 하나만들어 명언을 넣는다. 그리고 출력을 하기위해

리턴부분에 Learn React를 지우고 {proverbs} 를 넣는다.

(중괄호는 JSX문법) 

저장하고, 아까전에 켜두었던 리액트 창을 확인하면

이렇게 바뀐것을 확인할 수 있다.

하지만 우리는 명언을 하나씩, 또 랜덤명언앱이니 새로고침을하면 순서대로가 아닌

랜덤으로 나오게해야한다.

 

첫번째 명언을 불러오려면 {proverbs[0]} 이렇게 뒤에 인덱스값을쓰듯이 그부분에 랜덤을함수로 써주면되는데

 

랜덤으로 명언불러오는 함수만들기

const getRandom = (length) => {

return parseInt(Math.random() * length);

}     

 

명언의 길이를 받았을때, Math.random()는 0이상 1미만의 값을 랜덤으로 반환하는데 이에 명언길이를 곱해준다.

그럼 소수점이 생기는데 parseInt를 이용해 정수를 반환한다.

 

그리고 다시 리액트창을 확인하면 

명언이 하나씩나오고, 새로고침을하면 다른 명언이 또 무작위로 나오는 것을 확인할 수 있다.