(항해20일차) 220325 리액트 주특기 9일차

오늘 드디어 파이어베이스 이전까지의 강의를 다 들을 수 있었다. 

예상치 못한 부분에서 시간을 많이 보냈지만 

시간을 들인 만큼 리덕스에 대해 조금 더 이해할 수 있었던 것 같다.

이해와는 별개로 코드를 짤 때 유독 연산자와 관련된 실수를 많이 한다. 

잘 이해되지 않는 함수를 사용하거나, 새로 배운 개념과 관련된 어려움은 어쩔 수 없지만 

=== 같은 연산자를 헷갈리는건 문제가 있다.  

 

어쨌든 강의는 다 들었고 이제는 진짜 과제를 해볼 차례이다.

이번 과제는 단어장 만들기로 페이지는 총 3개로 보인다. 

- 단어장 카드가 모여 있는 메인 페이지 / 단어를 추가하는 페이지 / 단어를 수정하는 페이지 

1. 가장 상위 컴포넌트는 메인페이지이며 App.js - 단어카드 - 버튼 컴포넌트로 구성된다. 

2. 추가 단어 페이지와 수정 페이지는 사실 상 똑같은 페이지로 데이터만 채워진다.

   App.js - (버튼클릭) 추가단어 - 입력텍스트 컴포넌트로 구성된다. 

 

자 이제 만들어보자 ! 

---

=은 코드에서 같음을 의미하는 연산자가 아니다. 할당연산자의 하나로 

값을 선언하거나 할당할 때, 즉 정의의 의미로 사용하는 연산자이다.

a+=b (a는 a+b이다) , a -= b (a는 a-b이다) 도 할당연산자의 종류이다. 

 

==은 같음을 의미하지만, 요즘에는 거의 쓰이지 않는 연산자이다.

왜냐하면 더 엄격한 === 를 사용하기 때문이다.  

'1' 과 1 을 비교했을 때 == 에서는 true이지만, === 에서는 false 이다. 

==을 사용할 경우 예상치 못한 오류가 발생할 수 있기 때문에 === 을 사용하는 것이 맞다.

---

컴포넌트의 렌더링한 요소에 스타일 속성을 주고 싶을 때 :

1. 인라인 방식으로 할 수 있다. 

<div style={{width:'100px'}}>

2. props로 넘겨 스타일 컴포넌트에서 변수로 받는다. 

//렌더링되는 부분
<Box width={100+'px'}>
</Box>
//스타일 컴포넌트 부분
const Box = styled.div`
	width: ${(props) => props.width}
`;

2번 방법을 사용할 때 주의할 점

- props로 넘겨주는 데이터는 딕셔너리로 된 배열이기 때문에 props.key(받아야 할) 형태로 써야 한다.

- 스타일 컴포넌트에서 속성을 줄 때는 템플릿 리터럴 규칙에 따라야 한다. (변수는 ${변수} ) 

---