Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/irenechoii/react_study

2024 웹프레임워크 React
https://github.com/irenechoii/react_study

react web-framework

Last synced: about 2 months ago
JSON representation

2024 웹프레임워크 React

Awesome Lists containing this project

README 

        
# 전체 목차



[React 환경세팅](#react-환경세팅-for-m2)



[React에 대한 지식](#react-궁금증-해결)



# React 환경세팅 for M2



### 📋 목차



1. [NVM(Node Version Manager) 설치](#1-nvmnode-version-manager-설치)

2. [Node.js 설치](#2-nodejs-설치)

3. [yarn 설치](#3-yarn-설치)

4. [React 프로젝트 생성](#4-리액트-프로젝트-생성)








## 1. NVM(Node Version Manager) 설치



⭐️**참고 링크**⭐️ [ https://github.com/nvm-sh/nvm ] 



### How to install?



**Step One** 



```

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

```



```

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

```







**Step Two** 



```

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

```







**Example**



```

$ nvm install 20    # Node.js 20 LTS 버전 설치

$ npm use 20        # Node.js 20 버전 사용



$ npm install -g [email protected]

```







**설치 및 버전 확인** 



```

$ nvm --version



$ node -v



$ npm -v

```







## 2. Node.js 설치



### How to install?



⭐️**다운로드 링크**⭐️ 



[ https://nodejs.org/en/ ]



### 설치하는 이유?



**create-react-app** 라이브러리 때문



→ node.js를 설치하면 "**npm**"을 사용할 수 있음







## 3. yarn 설치



### How to install?



```

$ brew update

$ brew install yarn

$ yarn config set prefix ~/.yarn

```



**확인**



```

$ yarn --version

```







## 4. 리액트 프로젝트 생성



### Visual Studio Code



```

$ npx create-react-app [프로젝트 이름]

$ cd [프로젝트 이름]

$ npm start

```



#### React App 생성 [npx create-react-app [프로젝트 이름]]













#### React 실행 [npm install]





  

  








#### Success!











### IntelliJ














# React 궁금증 해결



### App.js / index.html / index.js의 관계






### node_modules 폴더



: 라이브러리를 전부 모아둔 폴더 






### public 폴더



: static 파일 보관함 (public 안의 파일들은 compile을 할 때, 압축이 되지 않음) 






### src 폴더



: source code 보관함 






### package.json



: 내가 설치한 라이브러리(및 버전) 목록 












## JSX 문법



### 1. 태그에 class를 주고 싶으면? 



```jsx



```








### 2. React에서 Data Binding 쉽게 하는 방법 



: { ***변수명*** } | 괄호 안에 변수 넣어주기



: { ***함수명()*** } | 괄호 안에 함수 넣어주기



```jsx

function App() {



      let posts = "React 공부 방법 1"



      function 함수() {

            return 100;

      }



      return (

            


                  


                        
React 개발 Blog


                  


                  
 { posts } 
 // 변수 데이터바인딩

                  
 { 함수() } 
 // 함수 데이터바인딩

            


      );

}

```







: { img src = { ***이미지명*** } } | 괄호 안에 이미지 넣어주기



```jsx

import logo from './logo.svg' // 이미지 import



function App() {

      return (

            
      

                  


                        
React 개발 Blog


                  


                   // 이미지 데이터바인딩

            


      ); 

}

```







: **src** / **id** / **href** 등의 속성에도 데이터바인딩 가능!








### 3. JSX에서 style 속성 집어넣을 때



: style={ object 자료형으로 만든 스타일 }



```jsx

function App() {

      let posts = "reactReact"



      
 // className에 데이터바인딩

            
 // div 태그에 데이터바인딩

                  React 재미있다!

            


      


}

```



```jsx

function App() {



      let posts = "React 공부 방법 1"



      let styles = {color: 'pink', fontSize : '20px'}



      function 함수() {

            return 100;

      }



      return (

            


                  


                        
React 개발 Blog


                  


                  
 {posts} 


                  
 {함수()} 


                  
 이건 태그 데이터 바인딩 


                  
 이건 속성 데이터 바인딩


            


      );

}

```










## useState

* ES6 destructuring 문법

 

 ```jsx

 function App() {



      // ES6 destructuring 문법

      let [title,changeTitle] = useState('개발 언어 추천'); // [state 데이터,state 데이터 변경 함수]



      return (

            


                  


                        


                              개발 블로그

                        


                  


                  


                        


                              { title }

                        


                        


                              10월 29일 화요일 발행

                        


                        


                  


            


      )

 }

```









```jsx

function App() {



      // ES6 destructuring 문법

      let [title,changeTitle] = useState(['개발 언어 추천', '개발 툴 추천']); // [state 데이터,state 데이터 변경 함수]



      return (

            


                  


                        


                              개발 블로그

                        


                  


                  


                        


                              { title }

                        


                        


                              10월 29일 화요일 발행

                        


                        


                  


                  


                        


                              { title[0] }

                        


                        


                              11월 3일 화요일 발행

                        


                        


                  


                  


                        


                              { title[1] }

                        


                        


                              11월 12일 화요일 발행

                        


                        


                  


            


      )

}

```




#### state

1. 변수 대신 쓰는 데이터 저장공간

2. useState()를 사용해 만들어야함

3. 문자, 숫자, array, object 모두 저장가능

- 변경이 자주 필요한 부분에 사용!



#### state 장점

- state에 데이터를 저장하면, state기 변경될 때, HTML이 자동으로 rendering 됨

- 즉, 새로고침을 하지 않더라도 변경사항이 smooth하게 반영됨








## 📍Tip📍

Terminal의 Warning을 없애고 싶다면?

```

/* eslint-disable */

```