리액트

카카오 프론트코테 구현문제

ReactDOM.render(  // 기존 렌더링 방식(sync)
  React.createElement('h1', null, 'A'),
  document.getElementById('root')
);
const root = ReactDOM.createRoot( // concur
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

이 코드는 React 17까지 사용되던 동기식(Synchronous) 렌더링 방식을 사용합니다.
ReactDOM.render() 메소드는 DOM에 직접 렌더링을 수행하며, React 요소를 document.getElementById(‘root’) 위치에 렌더링합니다.
이 방식에서는 UI 업데이트가 동기적으로 처리되므로, 매우 큰 작업이 있을 때는 브라우저가 잠시 멈출 수 있습니다.

컴포넌트

//~components/Hello.tsx

const Title = ({text, name}:{text:string, name:string}) => <h3>{text}aaaaaaaaaaaaaaaaaa{name}aaaaaaaaaaaaaaaaaaa</h3>

//위의 화살표 함수
export default function Hello(){

    return <>
    <Title text = "kkkkkkkkkkkkkk" name="jjjaejjjaejae" />
        <h1>hhheoolllo</h1>
        <div>gggg zzz oooooooooooooo</div>
        <div className="red" style=>gggg zzz oooooooooooooo</div>

        //style 선언은 {}로 열고 객체로 넣어주기
    </>
//export default function으로 만들어서 넣기

}

BBZJUN's

Contact

리액트

컴포넌트