react4 [웹개발 기초 스터디] React(1): Part2 📺생활코딩 강의 React www.youtube.com 컴포넌트 만들기 (이어서) Props 태그의 이름과 속성을 통해 재사용성이 높은 문법이 만들어짐 → 컴포넌트 태그를 여러 번 사용할 때 각각 다른 결과를 출력할 수 있도록 하고싶음 리액트 공식 문서의 Components and Props 항목 참고하기 - 아래는 props 권장 사용법 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } props를 이용해 App.js 의 Subject, Content 컴포넌트 수정하기 class Subject extends Component { render(){ return( {this.props.title} {.. 2021. 12. 24. [웹개발 기초 스터디] React(1): Part1 강의 출처: 생활코딩 React(https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi) React 수업은 web browser javascript와 class 기반 객체 지향 프로그래밍을 기반으로 하고 있다. React: a Javascript library for building user interfaces 엄청나게 복잡한 html 코드 ← 사용자 정의 태그(component)를 이용해 정리정돈 하는 방법 중 하나가 바로 react react을 사용할 경우에 코드의 가독성, 재사용성이 높아지며 유지보수 하기가 좀 더 용이해진다. 개발환경 세팅 npm 이용하여 create react app 설치 npm: node.js의 apps.. 2021. 12. 24. [5주차] 이벤트 핸들링, ref: DOM에 이름 달기 GDSC FE-Toy Project Study Plan • 2차 프로젝트 주제 선정 완료 • React 책 기반 개념 공부 진행 Week 5) ~11/18 • 발표자 이벤트 핸들링: 김채림 ref: DOM에 이름 달기: 김중현 📖 이벤트 핸들링 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 한다. 4.1. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하다. 4.1.1. 이벤트를 사용할 때 주의사항 이벤트 이름은 카멜 표기법으로 작성. -ex) onclick -> onClick, onkeyup ->onKeyUp 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달. -화살표 함수 문법을 사용하거나.. 2021. 11. 25. [2주차] 4장 스타일링 🎨 스타일링 리액트 네이티브는 자바스크립트를 이용해 스타일링 방법1. 인라인 스타일링 : 컴포넌트에 직접 스타일 입력 HTML의 인라인 스타일링과 비슷, but 객체 형태로 전달해야함 (HTML은 문자열 형태로 스타일 입력) 장점 : 어떤 스타일이 적용되는지 잘 보인다 단점 : 비슷한 역할을 하는 컴포넌트에 동일한 코드 반복 해당 스타일 적용 이유를 명확하게 이해하기 어려움 내용 방법2. 클래스 스타일링 : 스타일 시트에 스타일을 정의하고 컴포넌트에는 정의된 스타일의 이름으로 적용 = CSS 클래스를 사용하는 방법과 유사 장점 : 전체적인 스타일을 관리하기가 쉽다 const App = () => { return ( Inline Styling - Text ); }; const styles = StyleSh.. 2021. 11. 8. 이전 1 다음
