23.03.02(컴포넌트, props, state)

😀 display: flex

flex container (부모요소) 

flex item (자식요소)

 

😀리액트는 자바스크립트라고 생각하면 되는데 특이하게 html도 같이 쓸 수 있음

 

😀구글검색: 그림 이모티콘

https://kr.piliapp.com/emoji/google/

 

- 리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러가지 컴포넌트로 구성이 됨.

- 컴포넌트의 기능은 단순한 템플릿 이상임. 
  데이터가 주어졌을 때 이에 맞추어 ui를 만들어 주는 것 뿐만 아니라, 
  api를 이용하여 컴포넌트가 화면에 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며,
  임의의 메서드를 만들어 특별한 기능을 부여할 수도 있음.

- 컴포넌트의 종류
  1. 함수형 컴포넌트 (이게 자주쓰임)
     장점)
        - 클래스형 컴포넌트보다 선언하기 쉬움
        - 메모리 자원도 클래스형 컴포넌트보다 덜 사용
        - 프로젝트를 완성하여 빌드한 후 배포 시에도 결과물의 파일 크기가 더 작음
     단점)
        - state와 라이플사이클 API 사용이 불가능함
          하지만 리액트 V16.8 이후 버전부터는 Hooks라는 기능이 도입되어 해결됨

  2. 클래스형 컴포넌트
     장점)
        - state, lifecycle 관련 기능이 사용 가능함
        - 임의의 메서드를 정의할 수 있음
     단점)
        - 메모리 자원을 함수형 컴포넌트보다 조금 더 사용함

- props는 properties의 줄임말로 컴포넌트 속성을 설정할 때 사용하는 요소임.
  props 값은 해당 컴포넌트를 불러와서 사용하는 부모 컴포넌트에서 설정함
  따라서 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있음
  props를 변경하려면 부모 컴포넌트에서 변경해 주어야 함

- state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미함
 

// 함수형 컴포넌트 (함수이름이 대문자로 시작하면 컴포넌트임)

 function App() {

 

  const name = "홍길동";

  return (

    <div>

      {name}

    </div>

  );

}

// 클래스형 컴포넌트

//class App extends Component {

//  render() {

//    const name = "홍길동";

//    return <div>{name}</div>

//  }

//}

 

 

[App.js파일]

const App = () => {
  return <MyComponent name="리액트"></MyComponent>
}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
[MyComponent.js파일]

const MyComponent = (props) => {    
return (    
     <div>       
            나의 첫번째 컴포넌트<br/>        
            <p>내 이름은 {props.name} 입니다.</p>    
     </div>   
)}

// 다른 파일에서 이 파일을 import할 때
// 선언한 MyComponent 클래스형 컴포넌트를 불러오도록 설정하는 코드
export default MyComponent;

 

 

😀데이터바인딩

 let data = "red";

 return (

 <div className={data}>{post}</div>

)

 

😀 데이터가 많이 변하는건 state를 사용해야 한다.

a -> 변수명 

 let [a, b] = useState("남자 코트 추천");

let [글제목, b] = useState( ["남자 코트 추천", "강남 우동 맛집", "리액트 수업"] );

 

 

// 따봉은 배열이름임
// 따봉변경은 실행함수임 
let [따봉, 따봉변경] = useState(0);

<h4>{글제목[0]} <span onClick={ () => {         
     따봉변경(따봉 + 1);       
}}>👍</span>{따봉}</h4>