숨니의 개발일지

리액트 테스트 중에 div height 를 늘리고 싶어서 태그에 바로 style 속성 넣었는데 렌더링이 안되었다.ㅠㅠ
내가 한 코드

<div style="height:150px;">"내가 추가한 컴포넌트~"</div>

 
근데 React 는 style 속성을 넣는 방법이 따로 있었다. (2가지 방법)
 
첫번째는 아래와 같이 return 전에 템플릿으로 넣는 방법이 있다.

class Sumni extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const templateStyle = {
            height: "150px"
        }
        return (
            <Fragment>
                <div style={templateStyle}>
                    <h3>"내가 추가한 컴포넌트!!!"</h3>
                </div>
            </Fragment>
        )
    }
}

하지만 이렇게 템플릿으로 하기 귀찮다면 {} 안에 css 적어주면 된다.
아래와 같이!

class Sumni extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const templateStyle = {
            height: "150px"
        }
        return (
            <Fragment>
                <div style={{height:'100px'}}>
                    <h3>"내가 추가한 컴포넌트!!!"</h3>
                </div>
            </Fragment>
        )
    }
}

 
주의! style={{height:'100px;'}} -> 세미콜론 넣으면 안먹힘.

Fragment React Fragment 란?

React 16 이전 버전에선 하나의 element만 return 할 수 있는 React의 특성 때문에

여러 개의 태그를 리턴하기 위해선 하나의 부모 태그가 필요했다!

Fragment 태그를 사용하여 여러 개의 태그를 리턴할 수 있다.

이로 인해 불필요한 div 렌더링을 피할 수 있게 되었음!@!

import React, { Component, Fragment } from 'react';
 
class Test extends Component {
  render() {
    return (
      <Fragment>
        <header/>
        <div />
        <footer />
      </Fragment>
    );
  }
}
 
function App() {
  return (
    <div className="App">
      <Test></Test>
    </div>
  );
}
 
export default App;

아래와 같이 렌더링이 잘 된 것을 확인 할 수 있음!

리액트를 공부하다보면 동기, 비동기 방식 이라는 말이 자주 등장하는데

등장할 때 마다 검색하는데 항상 까먹어서 정리..(멍충쓰)

동기(Sync) :

- 요청(request)에 대한 응답(response)이 순차적으로 실행된다. (직렬)

- 청소,빨래,설거지 해라 (request) -> 청소 끝  -> 빨래 끝 -> 설거지 끝 (순차적인 작업 실행)

문제점 : 청소하다가 청소기 고장나서 하루종일 청소를 못하면 빨래(다음 작업)를 할 수 없음

비동기(Async) :

- 요청(request)에 대한 응답(response)이 다발적으로 실행된다. (병렬)

javascript의 대부분의 DOM 이벤트와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작

- 청소,빨래,설거지 해라 (request) -> 청소 시작&빨래 시작&설거지 시작 -> 빨래 끝 -> 설거지 끝 -> 청소 끝

 (동시다발적으로 작업 실행)

장점 : 청소중에 청소기가 고장나도 빨래를 할 수 있다.

단점 :  작업 순서가 중요한 일에 사용했다가 우선순위가 꼬여서 원하는 값이 안나올 수 있다.

아래 블로그에 더 상세하게 나와있다!

https://webclub.tistory.com/605