[ReactNative] Component

📢 컴포넌트

컴포넌트란 소프트웨어 시스템에서 독립적인 기능을 수행하는 모듈로써 교체가 가능한 부품

📢 커스텀 컴포넌트

🔘 직접 만들어도 되고 다양한 컴포넌트 라이브러리 사용 가능

🔘 NativeBase => 다양한 컴포넌트 라이브러리가 있는 사이트

📌 컴포넌트 선언 방식

1. 클래스 컴포넌트

import React, { Component } from 'react';

class App extends Component {
	render() {
    	const text = "Hello World"
        return <div className='react'>{text}</div>
      
    }
}


export default App;

📍 class키워드 필요

📍 컴포넌트로 상속을 받아야 함
App extends Component

📍render()메소드가 반드시 있어야 함

2. 함수 컴포넌트

import React from 'react';

const App = () => {
	const text = "Hello World"
    return <div className='react'>{text}</div>
  
  
}

export default App;

📢 state 사용 차이

state: 컴포넌트 내부에서 바뀔 수 있는 값

✔️ 클래스형

🔘 constructor 안에서 this.state 초기 값 설정 가능

🔘 constructor 없이도 바로 state 초기 값 설정 가능

🔘this.setState 함수로 state의 값 변경 가능

<onClick={()=>{
	this.setState({number: number+1});	
	}}

✔️ 함수형

useState함수로 state 사용
useState함수를 호출하면 배열이 반환되는데
첫번째 원소는 현재 상태
두번째 원소는 상태를 바꾸어 주는 함수

const [message, setMessage] = useState('');

📢 props 사용차이

props

🔘 컴포넌트의 속성을 설정 할 때 사용하는 요소

🔘 읽기 전용

🔘 컴포넌트 자체 props를 수정해서는 안됨

🔘 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 함

🔘 수정되는 것은 state

✔️ 클래스 컴포넌트의 props

🔘 this.props를 사용해 값을 불러옴

class MyComponent extends Component {
	render(){
    
    
    
    
    }
  
  
}

🔘 부모 객체의 키 값, 자식 props 활용

✔️ 함수 컴포넌트의 props

🔘 props를 불러올 필요 없이 바로 호출 할 수 있다.

const MyComponent = ({ name, children }) => {
	return(
    	<div>
      		안녕하세요 제 이름은 {name}입니다. <br />
      		children 값은 {children}입니다.
        <div/>
    
    );

}; 

📢 Life cycle

나중에 따로 다룸

참고자료