분류 전체보기101 13일차 (Styled components, Globalstyles, React Hook) Styled components // 1. styled.div, styled.p와 같은 형식으로 태그 앞에 styled를 붙여서 만든다. // 2. 형식은 html 형식을 따른다. const StyledBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; // 함수임 margin: 20px; `; const boxList = ["red", "blue", "green", "yellow"]; // 색을 넣으면 이름을 반환하는 함수 const getBoxName = (color) => { switch (color) { case "red": return "rex box"; default: r.. 2023. 8. 28. 3주차 WIL(Props) Props 1. 정의: 부모가 자식 컴포넌트에 물려준 데이터를 말하며 컴포넌트 간의 정보 교류 방법 2. 특징 1) 부모 -> 자식 방향으로만 흐름 2) 읽기 전용으로 취급하며, 변경하지 않음 3) props는 object literal의 형태를 가짐 3. 전달 function Mother() { const name = 'kim'; return //mothertName으로 자식 컴포넌트에게 전달 } 4. 받기 function Child(props){ return {props.motherName} // props로 전달받으며, 변수명은 상관 없음 } 5. props dilling: props가 꼬리의 꼬리를 무는 형태 6. props Children: 자식 컴포넌트에서 정보를 받는 방식으로 이름이 chil.. 2023. 8. 28. 12일차 (React 컴포넌트 중복 제거) Map function App() { const testArr = ["감자", "고구마", "오이", "가지", "옥수수"]; return ( {testArr.map(function (item) { return {item}; })} ); } 반복되는 컴포넌트를 Map 함수를 사용해서 짧게 표현할 수 있다. 방법은 먼저 배열을 만든 뒤, return문 안에 반복되는 컴포넌트를 Map 함수를 사용해서 나타내는 방법이다. filter function App() { const testArr = ["감자", "고구마", "오이", "가지", "옥수수"]; return ( {testArr.filter((item) => { return item !== "오이"; }).map((item) => { return {ite.. 2023. 8. 28. 11일차 (SEO, CRA, Component, Props, 불변성) SEO(Search Engine Optimization) 정의: 구글과 같은 검색 엔진에서 웹사이트의 가시성을 향상시키는 프로세스 목표: 누군가가 웹사이트의 콘텐츠과 관련된 특정 키워드를 검색할 때 해당 웹사이트가 검색 결과에서 더 높은 순위에 표시되도록 하는 것 효과: 광고 비융을 지불하지 않고도 유기적으로 더 많은 방문자 유치 가능 CRA(Create React App) 한 줄의 명령어 입력으로 React 프로젝트 개발에 필요한 필수 요소를 자동으로 구성하는 방법 == 보일러 플레이트 Component 기능: 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 다룰 수 있음 입출력: Props라는 임의의 값을 입력 받은 후, 화면에 어떻게 표시되는지를 기술하는.. 2023. 8. 25. 이전 1 ··· 17 18 19 20 21 22 23 ··· 26 다음 728x90