React-practice

● 리액트를 사용하여 유튜브 페이지 만들어보기

1. 터미널에서 npx create-react-app (원하는 파일이름) 을 입력하여 프로젝트를 생성한다.

원래는 프로젝트 구조나 연결들 하나하나를 모두 설정해줘야 하지만 create-react-app이라는 기본적인 구조와 연결을 모두 갖춰서 프로젝트를 생성하는 기능을 사용하는것!

 

2. 나에게 맞게 폴더 구성을 수정한다. 

이때, import로 연결되어있는 주소값들도 같이 수정해주어야한다

 

3. 전체적으로 어떤 식으로 컴포넌트들이 구성될지 그림을 그려본다.

기본적으로 트리모양으로 종속관계를 나타내어 보고, 재사용 가능한 컴포넌트들을 표시해본다.

이때, state는 어디서 관리해야할지, 어떤 메소드들이 필요할지, 어떤것들을 props로 내려줘야할지 어느정도 생각해보면서 그린다.

 

4. 코딩을 진행한다.

●  JSX : 자바스크립트의 확장문법 (html과 같은 형식을 자바스크립트로 변형시켜줌)

규칙 :

1. 반드시 하나의 엘리먼트로 모든 엘리먼트를 감싸야 한다.

2. JSX에서 자바스크립트 코드를 적용할땐 {}안에 작성한다.

3. if문을 사용할 수 없다 => 삼항연산자 사용해야 한다 (  (1+1 === 2 ? (<h1>정답</h1>) : <h1>탈락</h1>)

4. 엘리먼트의 클래스 이름을 적용할 때, class가 아닌 className을 사용 (className="name")

 

●  props

부모 컴포넌트로부터 물려받는 속성입니다. 이를 통해 부모컴포넌트와 소통할 수 있으며, 부모 컴포넌트에서 전달하는 props가 바뀌면 자동으로 업데이트 됩니다.

react에서 컴포넌트는 함수 컴포넌트와 class 컴포넌트가 있습니다.

먼저 함수 컴포넌트에서 props는

 

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

위와 같이 사용할 수 있는데, 중요한 점은 JSX에서 자바스크립트를 사용하기 위해서는 중괄호로 묶어주는것이 필요합니다.

위와같이 정의된 컴포넌트를 사용하게 될 부모 컴포넌트에서

 

....
<Welcome name="name" />
....

위와같은 방식으로 name에 어떤 값을 할당해주면 그 값이 Welcome의 props.name으로 들어가게됩니다.

 

다음으로 class 컴포넌트에서 props를 사용할때는 먼저 부모 컴포넌트를 다음과 같이 정의하면

import Child from './Child.js'

class Parent extends React.Component {
	constructor(props) {
    	super(props)
    }
    render() {
    	return (
    		<Child name='Peter' />
        )
    }
}

export default Parent;

자식 컴포넌트에서는 아래와같이 props를 받아 사용할 수 있습니다.

 

import Parent from './Parent.js'

class Child extends Parent {
	constructor(props) {
    	    super(props)
    	}
	render() {
    	    return <h1>Hello, {this.props.name}</h1>;
        }
}

export default Child;

 

 

●  state

state는 컴포넌트에서 필요한 동적 데이터로서, 사용자에 의해 변경되는 것을 관리할 때 사용하거나 상태를 저장해야 할 때 사용하고, 컴포넌트 내에서 변경이 가능하다. 변경할 때는 반드시 setState()를 사용해야 한다.

예시는 다음과 같다.

 

class Clock extends React.Component {
	constructor(props) {
    	super(props);
        this.state = {
        	date: new Date();
        }
    }
    
    render() {
    	return (
        	<div>
            	<h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}</h2>
            </div>
        );
    }
}

위의 예시에있는 state의 값을 바꾸고 싶을 때 사용하는 것이 setState()이다. this.state.date = '~~' 이런식이 아닌, 반드시 setState를 이용하여 아래와 같은 형식으로 코딩을 해야한다.

 

...
this.setState({
	date: "2020:01:20"
})

위와 같이 setState()메소드가 실행되면, react는 자동으로 다시 render()를 진행한다.

state안에 속성들이 여러개가 있더라도, 원하는 속성들만을 골라서 위의 형식으로 바꿔줄수 있다.

 

●  Life Cycle (생명주기) 메소드

React의 전체적인 흐름에서 특정 시점에 실행되는 함수들로, 대표적인 것들을 살펴보면,

 

contructor

생성자 메소드로 컴포넌트가 처음 생성될때 단 한번만 실행된다.

 

componentWillMount()

React 엘리먼트를 실제 DOM 노드에 추가하기 직전에 호출되는 메소드이다. (랜더 직전에)

 

render()

컴포넌트 랜더링을 담당한다.

 

componentDidMount()

컴포넌트가 만들어지고 render가 호출된 이후에 호출되는 메소드이다.

보통 여기서 AJAX나 타이머를 생성하는 코드를 작성한다.

 

componentDidUpdate(prevProps, prevState)

컴포넌트 업데이트 직후에 호출되는 메소드이다.

 

componentWillUnmount()

컴포넌트가 소멸된 시점(DOM에서 삭제된 후) 실행되는 메소드이다.

컴포넌트 내부에서 타이머나 비동기 API를 사용하고 있을 때, 이를 제거하기에 유용하다.