본문 바로가기

728x90

History

(3)

[Fast Campus , React] 12. TicTacToe 앱 만들기 (6) JSX key , jumpTo함수 JSX key 속성 리액트에서 요소의 리스트를 나열할때는 key를 넣어야한다. React가 변경,추가,제거된 항목 식별하는데 도움이 된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 한다. 리액트는 가상돔을 이용해서 바뀐 부분만 실제 돔에 적용 key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있다. key에는 유니크한 값을 넣어준다. (index는 비추천) 만약 리스트가 추가되거나 제거되면 해당 리스트의 key값도 바뀔수 있기 JumpTo 함수 작성 현재 몇 번째 스텝이지 알수있는 state 생성하기. 이전으로 되돌아갔을때 그 step을 기억하기 위해 const [stepNumber, setStepNumber] = useState(0); stepNumber를 업데이트위해 j..

[Fast Campus , React] 4. SPA React 파일 렌더링 순서 현재 App.js 파일의 소스코드를 변경하면 변경한 부분이 화면에 적용이 된다. 이게 어떤 순서대로 실행되고 있는지 봐보면, public/index.html HTML 템플릿파일. root를 div로 선언해 놓음 You need to enable JavaScript to run this app. 웹브라우저의 렌더링 소스 (html)를 보면 root가 App의 내용이 추가되어 있음 src/index.js 자바스크립트 시작점. 여기서 위에 root id를 가진 div 엘리먼트를 잡아주며, 그 엘리먼트 안에서 화면을 꾸밀 수 있게 된다 onst root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); M..

[Javascript] 브라우저 객체 모델 (BOM, Browser Object Model) 브라우저 객체 모델 (BOM, Browser Object Model) 브라우저에 대한 모든 내용을 담고 있는 객체. 뒤로가기, 북마크, 즐겨찾기, History, Url 등 브라우저가 가지고 있는 정보를 객체화시켜서 관리한다 계층적 구조 window (브라우저, 최상위 객체) document screen location history navigator body, div, img, a 등 사용자의 모니터 정보(속성)를 제공한다. 브라우저 주소창의 url에 대한 정보와 새로고침기능 등 제공 사용자가 방문한 사이트에 대한 이력(history) 브라우저의 정보 운영체제 정보 등 window 객체 메서드 종류 oper() , alert() , prompt() : 질의응답 창을 띄운다 , confirm() : 확인..

이전 1 다음

티스토리툴바