3-1기 스터디82 [웹개발 기초 스터디] React(2) : Part2 props -> read-only(수정 금지) states -> can be modified using this.setState props states 모두 render() 함수를 호출 상위 컴포넌트가 하위 컴포넌트로 값을 전달할 땐 props로 전달 하위 컴포넌트가 상위 컴포넌트로 값을 바꾸고 싶을 땐 event 사용 REDUX 는 하나의 저장소. 값이 하나 바뀌면 전체가 알아서 바뀜 CREATE - mode 변경 [Control.js] ... class Control extends Component { render() { return ( //1. create create //2. update update //3. delete ); } } ... create, update, delete를 각각 클릭해보.. 2022. 1. 3. [웹개발 기초 스터디] React(2) : Part1 17.1 - 17.3 컴포넌트 이벤트 만들기 우리가 만들려는 subject라는 컴포넌트는 onChangePage라는 이벤트가 있어서 이 컴포넌트 안에서 링크를 클릭했을 때 이 이벤트에 설치한 함수를 호출하도록 만들 것 //onChangePage 이벤트에 함수 설치 onChangePage = {function(){ alert('hihihi'); //this.setState({mode: 'welcome'}); }.bind(this)} onchangepage라고 하는 이 함수는 probs 형태로 subject에 전달됨 a태그를 onClick 했을 때 함수가 실행됨, 실행됐을 때 첫번째 인자로 이벤트 객체가 전달됨 그 객체에 preventDefault(); 호출 // 페이지바뀌는거 방지 this.props.on.. 2022. 1. 3. [8주차] 람다로 프로그래밍(2) 컬렉션 함수형 API 필수적인 함수: filter와 map filter 함수는 컬렉션에서 원치 않는 원소를 제거한다. 하지만 filter는 원소를 변환할 수는 없다. 원소를 변환하려면 map 함수를 사용해야 한다. map 함수는 주어진 람다를 컬렉션의 각 원소에 적용한 결과를 모아서 새 컬렉션을 만든다. data class Person(val name: String, val age: Int) fun main(args: Array) { val list = listOf(1, 2, 3, 4) println(list.filter { it % 2 == 0 }) val people = listOf(Person("Alice", 29), Person("Bob", 31)) println(people.filter { it.. 2022. 1. 3. [7주차] 람다로 프로그래밍(1) 람다 식과 멤버 참조 람다 소개 람다 식은 기본적으로 다른 함수에 넘길 수 있는 작은 코드 조각을 뜻한다. 코틀린 표준 라이브러리는 람다를 많이 사용한다. (ex) 컬렉션 처리) “이벤트가 발생하면 이 핸들러를 실행하자” / “데이터 구조의 모든 원소에 이 연산을 적용하자”와 같은 생각을 코드로 표현하기 위해 일련의 동작을 변수에 저장하거나 다른 함수에 넘겨야 하는 경우가 자주 있다. 이전에 자바에서는 무명 내부 클래스가 있었는데, 이는 코드를 함수에 넘기거나 변수에 저장할 수 있기는 하지만 상당히 번거롭다. 함수형 프로그래밍에서는 함수를 값처럼 다루는 접근 방법을 택함으로써 이 문제를 해결한다. 무명 내부 클래스로 리스너 구현하기 button.setOnClickListener(new onClickLis.. 2021. 12. 26. [웹개발 기초 스터디] 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. 이전 1 2 3 4 5 6 7 ··· 14 다음
