Front-end72 자습서 - 게임 자습서를 따를 수 있는 시작점. 리액트의 기본 리액트 가장 일반적인 테크닉 시간여행 -통찰력 React란 무엇인가요? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. 코드를 살펴보면 세 가지 React 컴포넌트를 확인할 수 있습니다. Square - 버튼 랜더링 Board - 사각형 9개 랜더링 Game - 게임판 랜더링 Square 컴포넌트는 을 렌더링하고 Board는 사각형 9개를 렌더링합니다. Game 컴포넌트는 게임판을 렌더링하며 나중에 수정할 자리 표시자 값을 가지고 있습니다. 지금은 사용자와 상호작용하는 컴포넌트가 없습니다. 프롭스. 외.. 2022. 5. 9. props 부모컴포넌트에서 자식컴포넌트로 state/함수 등 다양한 것을 전달할 수 있고 그것을 할수 있게 하는것이 props! (위에서 아래로만 전달가능) - 위에서 아래로만 계속 흐르는데... 이게 단점은 컴포넌트의 수가 많아지면 흐르는게 너무 많음 props drilling! 때문에 상태관리 tool이 필요하게됨. 일반적으로 작명에 state명={state명}으로 지음. 자식컴포넌트에 props 파라미터 등록후 props.state명 사용하면 됨. 2022. 5. 8. component 만드는 법 컴포넌트 만드는 법 독립적인 공간에 만든다. 함수명은 대문자로 만든다. return() 괄호안에 html을 담는다. 병렬 표현은 불가하다. 만약 중복해서 넣어주고 싶다면 제일바깥에 감싸준다. 원하는 위치에 또는 으로 표현한다. 참고) 컴포넌트 만드는 문법2 const Modal =()=>{} 어떤 HTML들을 Component 만드는게 좋을까 기준은 없습니다만 관습적으로 어떤 부분을 주로 Component화 하냐면 - 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋습니다. - 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋습니다. - 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는게 좋습니다. .. 2022. 5. 7. state 사용법 state 사용법 a는 state에 보관했던 자료, b는 state 변경 도와주는 함수. **Destructuring 문법 -> let num =[1,2] let [a,c]=[1,2] 배열 안에 있던 것을 쉽게 꺼내씀. state를 왜 써야하나? state가 변경하되면 html에 즉각적으로 html재랜더링 되게 만드는것. 자주 변경 될 것같은 것을 전부 state로 만들면 됨. let [a,b]=useState([배열 ]) 하단에서 꺼내쓸때는 {a[배열 인덱스]} 이벤트 발생시 바로 함수실행으로 만들어도 됨. state를 변경하는 것은 state변경함수를 써야함 (새로운state) 위의 예시에서는 updateLike() Edit Title 버튼을 눌렀을때 기존 state가 가지고있던것 말고 새로운 것으로.. 2022. 5. 7. 리액트 작동원리/JSX/ 리액트 작동 원리 App.js 에서 작성된 내용이 index.js를 통해 index.html 로 전달되어 화면에 구현됨. package.json 파일 내부에 는 프로젝트에 대한 정보가 기록되어있음. (이름,버전,사용라이브러리 등) jsx 문법 데이터 바인딩은 {중괄호} App.js에서 스타일 수정은 style={ { 프로퍼티명:'값' } } final 요약 2022. 5. 6. 브라우저 기본 API (local storage) 브라우저가 리프레쉬 되어도 정보를 저장해두는 것. 기본적으로 저장할때 string으로 저장된다는 것을 잊지말자. 2022. 5. 5. layout/design/components 레이아웃의 기본중 기본: display block과 inline의 공통점과 차이점 inline-block과 vertical-align 대부분의 상황을 커버 할 수 있는 레이아웃의 핵심: flex FlexBox의 동작 방식 이해하기 Main Axis와 Cross Axis margin auto 키워드로 정렬하기 justify-content와 align-items FlexBox로 Sidebar, Contents 구조 만들기 자유도 높은 레이아웃 방법: position relative와 absolute absolute, left, right, top, bottom 0 기법 셀렉터의 카테고리를 나누자 공통의 클래스는 별도로 관리하자 체계적인 CSS 작성을 위한 Layout Class 시각적인 덩어리 기준으로 코딩.. 2022. 4. 22. 이미지 스프라이트/inline block 예제 Home About Profile Video Contact Us Jaws Lorem Ipsum is simply dummy text of the printing and typesetting industry. text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Giants Wave Lorem Ipsum is simply dummy text of thedummy text of thedummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's stand.. 2022. 4. 21. float float의 본질에 대해 이해를 해야한다. float가 보여지는 요소는 마크업이 위에 있어야 한다. img 와 텍스트가 버려지는 공간 없이 구성되는 것을 볼 수 있다. 저것이 float의 목적이다. (float는 무조건! 뒤따라 오는 컨텐츠와 섞인다!) 2022. 4. 17. 이전 1 2 3 4 ··· 8 다음
