리액트 공부 및 면접 질문 준비

안녕하세요 홍 가 입니다.

오늘은 전에 올렸던 리액트 기초 공부를 좀 더 추가해서 올려보려고 합니다.

 

우선 jsx로 사용하여 HTML문법을 사용하여 만들었습니다.

 

style은 직접 넣어서 사용이 가능하거나 const로 스타일을 넣어 사용이 가능하고 

css파일을 사용하여도 사용이 가능합니다. 

CSS-in-JS라는 styled-component를 사용해서 스타일 작업도 가능합니다.

 

Study파일에는 Props를 사용했으며 

App파일에 Study컴포넌트 부분에 name, color, isSpecial를 적어놨다 

컴포넌트 부분에 적어두고 파일로 돌아와서 () 안에 {}를 넣고 그 안에 적어둔 내용을 적고 사용하면 Props가 사용이 된다.

 

props사용시 주의할점은 

다 {}로 사용 하면 안되고 style부분은 {{}} 으로 사용해야한다. 

이런식으로

Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

에러가 나오므로 저런 에러가 나올시

꼭 {{}}을 사용하세요.

 

이 위에 사진과 아래사진의 다른 점을 찾으라면 

import React from 'react';

이 차이이다.

 

원래는 브라우저가 HTML, CSS, JavaScript만 읽을 수 있기 때문에 

import React를 사용해서 브라우저가 읽을 수 있게 변환시켰다.

 

17 버전부터 리액트 내부에 jsx를 React 요소로 변환하는 작업을 거치기 때문에 모든 컴포넌트에 작성을 안 해도 된다.

 

그러고 Wrapper부분에서는 App파일을 보면 Wrapper로 감싸고 있는데 children을 사용하지 않을 시 밖에 내용이 보이지 않는다. 

 

props와 children을 사용하면 코드 재사용성이 향상된다.