728x90 300x250 SMALL Front-end319 기존 웹사이트에 리액트 적용하기 html 테스트 기존 사이트 리액트 삽입하기 jsfunction MyButton() { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', {onClick:() => setIsClicked(true)}, isClicked ? 'Clicked' : 'Click here!' )}const domContainer = document.querySelector('#root');ReactDOM.render(React.createElement(MyButton), domContainer); 2024. 10. 22. JSX란? JSX는 JavaScript XML의 약자로 자바스크립트를 확장 시킨 문법이기 때문에 모든 자바스크립트 문법을 지원하고 여기에 HTML과 XML을 같이 사용하는 형태다. 리액트는 컴포넌트 기반으로 UI를 구성하는데, 이 컴포넌트를 작성할 때 JSX를 사용하면 HTML태그와 유사한 문법으로 UI 구조를 쉽게 정의할 수 있음.JSX는 최종적으로 브라우저가 이해할 수 있는 순수 자바스크립트로 변환되고 이 변환 작업은 Babel 같은 트랜스파일러에 의해 이루어지며, 실제로 브라우저는 변호나된 자바스크립트 코드를 실행한다. JSX 사용법const element = Hello, world!; 위와 같은 JSX는 Babel에 의해 다음과 같이 변환된다.const element = React.createElement(.. 2024. 10. 18. 비주얼 스튜디오 코드 라이브 서버 크롬 연결 1. File > Preferences 2. Settings 3. Extensions > Live Server config > Custom Browser > chrome로 변경 2024. 10. 11. 마진 병합 : 인접 요소 마진이 함께 적용되는 문제 해결 문제 시나리오 html css.parent { background-color: lightgrey; height: 150px;}.child { margin-top: 20px; background-color: lightblue; height: 100px; width: 100px;} 이 경우 .child 요소 상단에만 20px의 마진을 기대 했지만의도와 다르게 .parent 요소도 내려가게 된다. 이유.paert 요소 상단 마진과 병합이 된다. 마진 병합은 css 레이아웃 엔진이 블록 요소의 수직 간격을 보다 직관적으로 처리하기 위해 설계되었다.이 개념은 요소 간의 중복된 마진을 줄이고 더 깔끔한 레이아웃을 생성하는데 도움된다. 하지만 이것이 예상치 못한 문제를 야기함.. 2024. 7. 10. 이전 1 ··· 20 21 22 23 24 25 26 ··· 80 다음 728x90 반응형 LIST