WIL #3 - React 숙련 주

1. React 숙련 주

 

1) 배운 것

<DOM>

Document Object Model의 줄임말. 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성함. 웹브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있음.

가상돔에서 작성 후 마지막에 비교하여 바뀐부분만 진짜 DOM에 반영한다.

 

<ROUTE>

동적 라우팅:

1.
<Route path="/cat/:cat_name">
-> :(콜론)처리 후 cat_name하면 nabi, 치즈 등 random 한 값이 들어올 수 있도록 해줄 수 있음.


2.
<Route path="/cat/:cat_name" excat component={Cat}>
-> 아예 컴포넌트 값 명시.

React-router-dom 버전에 따라 컴파일 시 오류날 수 있음. 버전에 따라 코딩법도 좀 다름.

 

<쿼리>

/cat?name=nabi
-> ?key=value

<파라미터>
/cat/nabi

 

<State / Props>

state => 컴포넌트가 갖고있는 데이터

props => Component가 부모 Component로부터 받아온 데이터

<함수 선언법>

function X() 함수를 선언하거나
const X = (props) => {
} 화살표 함수로 함수 나타낼 수 있음.

<Class 함수에서 constructor의 역할>

constructor(props){
// class니까 초기화 위한 constructor
super(props);
// 부모 클래스에 있는 친구들 가져오는 거임



<마진 병합 상쇄 현상>
-> 자식요소의 마진이 부모요소로 넘어가 버린 것.
ex) h1값에 기본 마진이 잡혀있어서 맨위 공간이 남는 경우 있음.

F12 콘솔창 들어가서 styles탭에 element.style{}안에
display: inline-flex; 추가하면 됨.


<중괄호 리턴함수>

${(props) => {
  return props.bg_color;
}}
II
background-color : ${(props) => (props.bg_color)}

<Nesting(알까기?)>

부모 컴포넌트 말고 자식 컴포넌트에도 CSS적용해줄 수 있음.

ex)

render() {
      console.log(this.state.list);
      return (
        <div className="App">
          <MyStyled>

 

 

 

2) 특이사항

강의는 하나하나 다 들어야 할 듯.

비전공이라면 강의 세부내용까지 듣고 이해하는 게 필수.

급한 마음에 대충 듣고 넘어가면 머릿속에 남는게 없음.

듣고 정리하고 적으면서 내용 정리해야 강의 지나가면서 뭔내용인지 

코드 하나하나 이해할 수 있게 됨.