전체 글69 6. 리액트 컴포넌트 스타일링 (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. 동적 인라인 스타일링 예전 글에서 JSX 태그에 style을 추가하여 css 스타일링을 하였다. style 속성에 삼항 연산자를 사용하면 동적 스타일링을 할 수 있다. return ( Course Goal Add Goal ); 동적 CSS 클래스 설정 백틱을 사용하면 className에서 동적으로 css 클래스를 설정.. 2022. 5. 30. 5.3 리스트 렌더링 및 조건부 Content: 토글 버튼 만들기 (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. 토글 버튼 토글 버튼을 만들어서 렌더링을 on / off 해보자 state를 만들어 기본값을 false로 준다. const [isEditing, setIsEditing] = useState(false); // 토글용 state, default값을 false로 준다. 2개의 함수를 만들어 실행될때 각각 true와 fal.. 2022. 5. 29. 5.3 리스트 렌더링 및 조건부 Content: 동적 스타일 (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. css를 동적으로 스타일링 하기 동적인 변화를 주어야하기 때문에 let으로 변수를 선언한다. ( barFillHeight ) 그리고 조건문을 활용해 props에 동적인 변화를 주고 css 스타일을 추가하고싶은 className이 있는 태그에서 style을 추가하면 된다. import React from "react";.. 2022. 5. 28. 5.2 리스트 렌더링 및 조건부 Content: 조건부 출력(feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. 조건부 출력하기 조건부 리스트 출력을 해보자 삼항 연산자 사용하기 JSX문법을 사용하여 3항연산자를 사용하면 조건부 출력을 할 수 있다. return ( {/* 삼항 연산자를 활용해 조건부 출력 */} {filteredExpenses.length === 0 ? ( No expenses found. ) : ( filte.. 2022. 5. 28. 5.1 리스트 렌더링 및 조건부 Content: key (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. key값 주기 지금까지 값을 입력해 버튼을 누르면 새 expese가 expenses리스트 최상단에 추가되어 잘 작동하는 것을 확인할 수 있다. 하지만 개발자모드의 콘솔창을 확인해보면 유니크한 key값을 가져야한다는 에러문구가 나온다. 리액트에서는 상태를 가진 리스트를 렌더링할때는 고유한 key 값을 부여하지 않으면 버.. 2022. 5. 28. 이전 1 ··· 8 9 10 11 12 13 14 다음
