1, 2장 요점 정리

 

 

 

1장

 

자바스크립트의 코드 규칙을 일관성 있게 작성하고, 잠재적인 코드 실수를 방지하는 도구

=> 바로 ESLint

들여쓰기, 세미콜론, 따옴표 등의 규칙을 한번에 정리

=> Prettier

 

 

 

해당 에러가 자동으로 고쳐지게 만드는 방법은 아래 블로그 참고

https://arajo.tistory.com/366

 

 

 

 

 

---

 

 

 

 

 

2장

 

컴포넌트(component) : 구성요소

 

 

 

SafeAreaView : 디스플레이의 보이지 않는 영역 및 최하단 영역에 내용이 보여지는 것을 방지

View  : 가장 기본적인 컴포넌트로 레이아웃 및 스타일을 담당.

Text : 텍스트를 보여주는 역할.

 

 

 

웬만하면 function 함수로 컴포넌트를 선언해라. 대세임.

 

 

 

JSX에서 자바스크립트 표현식을 보여줘야 할 때는 중괄호 ' {}' 로 감싸서 작성하면 됨.

 

 

 

컴포넌트에 Props를 지정하지 않았을 때,

사용할 기본값을 설정해주고 싶다면 defaultProps를 사용

 

 

 

<Text>는 <View> 안에 넣어라

 

 

 

 {/* 주석을 작성해봅시다. */}

 

 

 

StyleSheet.create 함수로 CSS 스타일을 만든다.

이 때, CSS와의 주요 차이점은 아래와 같다.

• 선택자 개념이 없다.
• 모든 스타일 속성은 camelCase로 작성.
• display 속성은 기본적으로 flex이며, 다른 값은 none 이 끝.
• flexDirection 속성의 기본값은 웹에서는 row이지만, 리액트 네이티브에서는 column.
• 리액트 네이티브에서 스타일링할 때 숫자 단위는 dp뿐.
• background 대신 backgroundColor를 사용.
• border 대신 borderWidth, borderStyle, borderColor 등을 따로따로 설정 필요.

 

 

 

size는 small, medium, large

 

 

 

구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법 => 비구조화 할당’

한 컴포넌트 안에 여러개의 컴포넌트가 있을 때,

그 여러 개의 컴포넌트 집합은 그 한 컴포넌트와 같은 취급을 받을 수 있다.

 

 

 

 

useState는 상태 값을 관리하는 함수

 

 

 

const [visible, setVisible] = useState(초기값);

visible은 상태 값. setVisible은 상태 값을 변경할 수 있는 함수.

useState를 사용해 Boolean뿐만 아니라 숫자, 객체, 배열 등의 형태를 가진 상태를 관리할 수도 있다.

 

 

 

Hook의 규칙

• Hook은 컴포넌트의 최상위 레벨에서만 사용해야 함. 
• 여러 Hook을 사용하여 직접 Hook을 만들 수 있습니다. 이를 커스텀(Custom) Hook이라고 부른다.
• Hook은 커스텀 Hook 또는 함수 컴포넌트에서만 사용할 수 있다.

 

 

 

onPress 함수를 구현한 다음에 Button의 onPress Props로 지정하면 버튼을 눌렀을 때 해당 함수가 호출

 

 

 

Button 컴포넌트의 이름은 title Props를 통해 설정할 수 있다. 즉, title 이름의 변수로 받는다는 말

조건부 렌더링은 삼항연산자보다는 &&을 사용하는 게 구문이 짧아져서 편하다

 

 

 

alignItems는 가로 정렬을 의미 / justifyContent는 세로 정렬을 의미

만약 이 컴포넌트의 flexDirection을 row로 바꾸면

alignItems가 세로 정렬을 의미 / justifyContent가 가로 정렬을 의미