왼쪽에서 나오는 메뉴 리액트에서 메뉴 클릭시 왼쪽에서 나오는 메뉴는 단순히 css를 이용했다 컴포넌트 안에서 스타일 컴포넌트에 props로 현재 메뉴가 닫힌지 열린지 구분하게 하고 trasition으로 부드럽게 나오게 했다 const MenuOpenDiv = styled.div` width: 400px; height: 100%; background: #263245; position: fixed; left: ${(props) => (props.layoutMenu === "close" ? "-480px" : "80px")}; top: 0; bottom: 0; transition: 0.5s ease-in-out; z-index: 99999; box-shadow: 2px 4px 15px 0 #000; route..
함수형 프로그래밍 클래스 X 리액트는 사용자가 만들어놓은 jsx코드를 렌더링 하는데, state와 props 의 변화에 따라 동적으로 렌더링을 함! 1. 하위태그에서 props로 컴포넌트를 연결 return div안 여는태그와 닫는태그 안에있는건 하위컴포넌트에서 children으로도 받을수있음(구조분해할당 가능) ㄴ children.props로도 가능 2. 하위 컴포넌트에서 props로 받고 그곳에서 jsx 조작 (props로 받은걸 {???.props}로 받을수도있음) 3. 빈태그를 이용하면 return안에 바로 여러 div설계 가능 4. input안에 value={value} 는 입력값을 뜻함 onchange value를 입력하려면 state에 넣어서 화면을 갱신되게함 onchange로 change가..
react 프레임워크 다른 셋팅들을 아직 다 하기 힘들기때문에 yarn create react-app sample-project로 생성 리액트를 구동할땐 파일들어가서 터미널로 yarn start index는 id를 가진애를 끌어올뿐 모든일은 컴포넌트 안에서 일어남 모든 컴포넌트는 함수 맨위는 import 그밑은 함수 안에 Js들어가는부분 그안에 return으로 jsx들어감 맨 밑에 export 화면을 랜더링 하는 기준 -> props(구조분해할당 으로도 가능), state state는 항상 useState로 묶여있어야함 전개연산자(중요)
배운것 리액트 기본개념, JSX, Props, Component 리액트는 기본적으로 SPA(Single Page Application)를 전제로 하고있다. Component 에선 props를 받는게 자식 그걸 품고있는 상위요소가 부모이다. 마지막부모를 export해준다. JSX 문법에선 class 대신 className 자바스크립트 표현식은 중괄호를 사용하는등 html과 비슷하지만 다른점이 많다. 태그가 비어있다면 />로 닫아줘야지 실행가능. 프로그래머스 N의 배수 고르기: function solution(n, numlist) { return numlist.filter(i => i%n === 0) };
