[react] 시작 및 기초문법 (1주차)

리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

 

https://codingapple.com/course/react-basic/

코딩애플님 강의 참고해서 공부했습니다. 만약 저작권 문제가 된다면 비공개처리 할테니 쪽지나 댓글 부탁드립니다.

 

 

첫번째로 nodejs 설치하기

https://nodejs.org/ko/

Node.js

 

1 . 설치 후 프로젝트 작성 할 폴더 하나 만들기

2. shift + 우클릭 후 powershell 열기

3. npx create-recat-app 앱이름

4. 터미널에 npm start 쓰기

 

node_modules : 라이브러리 코드 보관함

public : static 파일 모아놓은 곳

src : 코드 짜는 곳

package.json : 프로젝트 정보

 

react에서는 2가지 문법이 존재한다.

1. class >> className으로 바꾸기

2. 변수 넣을땐 {중괄호}

3. style 넣을 땐 style={}

- slyle={ {이름 : '값'} }

 

len post = '미니멀 패션' 이라고 저장해두어서 { post } 는  전부 '미니멀 패션'으로 변수가 저장된 것이다.

 

자료를 보관 할 때 post를 썼지만 

잠깐 저장 할 땐 state 써도 됨

 

 

글제목1 = state에 보관했던 자료

b = state 변경 도와주는 함수

 

app.js

function App() {
  
  let post = '미니멀 패션'
  let [글제목1,b] = useState('남자 셔츠 추천')
  let [글제목2,c] = useState('남자 후드 추천')
  let [글제목3,d] = useState('남자 바지 추천')
  
  return (
    <div className="App">  
      <div className = 'black_nav'>
        <h4>ReactBlog</h4>
      </div>
      <div className='list'>
        <h4>{ 글제목1 }</h4>
        <p>10월 04일 발행</p>    
      </div>
      <div className='list'>
        <h4>{ 글제목2 }</h4>
        <p>10월 04일 발행</p>    
      </div>
      <div className='list'>
        <h4>{ 글제목3 }</h4>
        <p>10월 05일 발행</p>    
      </div>
    </div>
  );
}

app.css

 

.black_nav{
  display: flex;
  background-color: black;
  width : 100%;
  color: white;
  padding-left: 20px;
}
div {
  box-sizing: border-box;
}
.list{
  padding-left: 20ox;
  text-align: left;
  border-bottom: 1px solid darkgray;

}

 

 

왜 state를 쓸까?

일반 변수는 갑자기 변경되면 html에 자동으로 반영안됨

state는 갑자기 변경되면 state쓰던 html은 자동 재렌더링 됨

 

Q.state 언제 써야하나?

>변동시 자동으로 html에 반영되게 만들고 싶으면 state

 

#결과

글제목 옆에 추천 수 버튼 만들기

 

onClick ={}

• {}안에는 함수만 들어올 수 있음.
• function 혹은 () ⇒ {}

 <div className='list'>
        <h4>{ 글제목[0] } <span onClick={ ()=>{ 좋아요변경(좋아요+1) }}>❤</span> {좋아요} </h4>
        <p>10월 04일 발행</p>    
      </div>