220308 TIL

1. React에서 Node.js를 사용하는 이유? 

Node.js를 설치하게 되면 npm(Node Package Manger)이 설치된다. 

Node.js와 React가 직접적인 관련은 없지만, React 프로젝트 개발 시 필요한 주요 도구들(바벨,웹팩 등)을 Node.js의 npm이 설치해주는 것이다. 

 

2. 리액트 프로젝트를 VSCode에서 쉽게 생성하는 방법 

Terminal에 npx create-react-app 프로젝트 이름

npx는 npm의 아들이며 npm@5.2.0 버전부터 새로 추가되었다고 한다. 

npx가 없을 당시에는 npm을 통해 React app을 생성했는데 

npm install -g create-react-app ~ 을 했었는데 문제점이 있었다. CRA(Create React App:리액트 프로젝트 시작 시 필요한 개발 환경을 셋팅해주는 도구)의 무거운 의존성 라이브러리들이 컴퓨터에 남았기 때문이다. 

 

3. App.js에서 작성한 내용은 index.js에서 id=root를 거쳐 index.html 리액트 메인 페이지에 담김 

index.js가 app.js 내의 html 파일을 index.html안에 넣는 역할을 하는 것이다.

 

4. JSX : JavaScript를 확장한 문법

UI가 어떻게 생겨야 하는지 설명하기 위해 리액트와 함께 사용할 것을 권장 

 

제일 기억에 남는 것은 { }이다. 

 

JSX는 React의 element를 생성한다. 리액트는 JSX 사용이 필수는 아니지만 대부분의 사람은 JS 코드 내에서 

UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각(데이터 바인딩!!! -> react,vue,angular을 쓰는 이유) 

 

5. 클래스 표기 

원래 HTML이나 JS 에서는 클래스를 쓸 때 

<div class="hello"></div>와 같이 썼지만

React는 <div className="hello"></div> 라고 써주어야 한다.

 

<div style="dd"></div>와 같이 썼지만 

React에서는 <div style="object 형식"></div>로 써주어야 한다. 

 

만약에 <div style="height:30px;">안녕</div>와 같이 작성하게 된다면 렌더링이 안된다. 

방법은 2가지이다. 

1) return 전에 템플릿으로 넣는다. 

class Hello extends Component { 
	constructor(props) { 
    	super(props);
} 
	render() { 
    	const templateStyle={ 
        		height="30px"; 
      } 
      return ( 
      	<Fragment>
        	<div style={templateStyle}>
            	<h3>"내가 추가한 컴포넌트"</h3>
        </Fragment>
       )
    }
}

그런데 템플릿을 만들기 귀찮을 수 있으니 

 

Inline Style CSS 방식을 사용한다. render() 함수에서 직접 작성 

~ 
return ( 
	<Fragment> 
    	<div style={{height:'100px'}}> 
        	<h3>~</h3> 
        </div>
    <Fragment>
    )
  }
}

 style 태그 안에 {{height:'100px'}} 을 해주면 된다. 그런데 여기에 세미콜론을 넣으면 안먹힌다. 

 

3번째 방법은 미리 작성해둔 CSS를 불러와서 import 태그에 className으로 작성해서 사용하는 스타일 방식 

import style from './App.css';와 같이

 

6. 데이터 바인딩 

React,vue,Angular을 쓰는 가장 큰 이유는 데이터 바인딩이다. 

 

전역변수든, 해당 function 안에 변수를 작성해놓고 

return() 함수 내에서 해당 변수나 함수를 호출해와서 쓰는 것이다.

 

만약에 let name = "홍길동" 이면 

<h3> {name} </h3> 이렇게 해서 쓸 수 있는 것이다. 

 

그러고 return() 함수 밖에서 function을 쓰고 해당 함수 이름 또한 { 함수명() }을 적고 사용한다. 

 

7. React에서 이미지 출력은? 

원래 html의 경우는 <img src="해당 이미지 경로", 이미지 사이즈 등 속성>으로 적어줬다. 그러나 이는 코드의 길이가 너무 길어진다. 

 

React에서는 좀 다르다. 예를 들면 testA.png라는 이미지를 해당 html 안에 넣어야 한다고 가정하자. 

import imgA from './images/testA.png" 

 

imgA라는 이름으로 이미지가 추가되고, jsx 등의 템플릿에 아래와 같이 추가하여 이미지를 불러온다. 

imgA는 변수이므로 {} 를 사용한다.

<img src={imgA}/> 

 

만약 width, height 및 alt와 같은 어트리뷰트가 함께 있다면 아래와 같이 코드 작성 

<div> 
<img src={imgA} 
	width='12' 
    height='12' 
    alt='testA' /> 
</div>

추가) require()를 사용하여 이미지 추가 

require(이미지 경로) 

 

<img src={ require('/.images/testA.png')}/> 

 

 

>> 둘다 return() 함수 안에 작성! 

 

8. state 

동적인 데이터를 다룰 때 사용 

 

* props(properties의 줄임말)와 state는 일반 자바스크립트 객체. 

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 차이점은 

props는 함수 매개변수처럼 컴포넌트에 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다. 

 

var [a,b] = [10,100] // array내에 각각의 데이터를 넣고 싶을때 사용. 10을 a에, 100을 b에 넣는다. 

array의 첫번째 요소는 '상태값 저장 변수(state)'이고 두번째 요소는 '상태값 갱신 함수(setState)'이다.

우리는 state를 var로 선언해서 값이 변할 리가 없다. 

 

자주 바뀌거나 중요한 데이터는 state에 저장해서 쓴다. 

컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 useState를 통해 컴포넌트에서 바뀌는 값을 관리한다. 

 

* useState 동작 원리 

import {userState} from 'react' 

'react라는 모듈에서 useState를 import해서 사용하고 있다. 

실행될때마다 dispatcher를 선언하고 useState 메소드를 실행해서 그 값을 반환한다. 

 

9. function App() { } -- 8번과 관련 

웹이 로딩되고 최초로 App함수가 호출된다(App.js 내에서) 

App은 인수로 0을 전달하며 userState를 호출한다. useState는 실행될때마다 초기값을 전달받지만, 내부적으로 변수값이 undefined인지 확인하기 위해서 최초의 호출에만 초기값을 해당 변수에 해당하고 이후 초기값은 사용되지 않는다. 

이후 해당 변수와 그 값을 재할당하는 setState 함수를 배열에 담아 반환한다. 

 

 

 

 

 

 

참고 

https://sum0725.tistory.com/22

React 태그 안에 style 속성 넣기

https://webisfree.com/2019-12-12/[react]-img-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 

[React] img 태그의 이미지를 추가하는 방법 및 예제 알아보기

https://velog.io/@jjunyjjuny/React-useState%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%A0%EA%B9%8C