React (13) 썸네일형 리스트형 React | 회원가입 기능 구현하기 현재 email창엔 '@'가 포함되어야 하고, password는 5자리 이상이어야 버튼이 활성화되도록 유효성 로직을 포함한 회원가입을 진행해보고자 한다. Step.1 : state 설정 최상위 컴포넌트의 state/fetch 함수 부분 (중요 부분만 발췌) // state 부분 constructor(props) { super(props); this.state = { first_name: 'Donghee', last_name: 'Kim', email: '', password: '', phone_number: '01011111111', gender: 'w', birth: '1995-12-27', }; } //fetch 함수 부분 (then 함수 부분은 생략) fetch('API주소', { method: 'P.. React | 검색 기능 구현하기 React로 외부 API를 받아온 뒤, 검색창에 입력하면 관련 데이터가 나오는 기능을 구현해보았다. 참고로, 해당 사이트는 아래의 3단 구조 컴포넌트로 되어있다. Monsters(최상위) > CardList > Card 아래엔 Monsters Class 코드 위주로, 또 import 부분 등은 생략하고 적어볼 예정 Step.1 : state 설정 componentDidMount() { fetch("API주소") .then((res) => res.json()) .then((data) => { this.setState({ monsters: data, userInput: this.state.userInput, }); }); } // SearchBox 에 props로 넘겨줄 handleChange 메소드 정의 .. React | map 함수 적용시 key props를 부여하는 이유 React에선 기존에 한땀한땀 작성해야했던 배열을 map()함수를 이용해 element list로 반복실행할 수 있다. 예를 들어 div안에 feed의 데이터가 담긴 배열(this.state.feeds)에서 배열 값이 하나씩 나타나도록 map()함수를 이용할 때, 아래의 코드를 작성했다. (실제 코드에서 일부분을 빼내온 터라 보충 설명을 해보자면, 배열 값 feed는 comments, feedContents의 속성을 가지고있다.) { this.state.feeds.map(feed => { return ( ); })} 위 코드를 실행시키면 console에 아래와 같이 list의 모든 child요소는 unique key 속성을 가져야 한다는 메세지가 출력된다. 그럼 여기서 key는 무엇이고, 왜 필요한 걸까.. React | State와 Props State와 Props state 와 props (properties)는 JavaScript의 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는, 속성을 가진 데이터이다. State와 Props의 차이점 state : (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리되는 데이터. 자식 컴포넌트 입장에서 보면 쓰기 전용이라고 할 수 있다. props : (함수의 매개변수처럼) 상위 계층의 컴포넌트에서 자식 컴포넌트로 전달되는 데이터. 자식 컴포넌트 입장에서 보면 읽기 전용이라고 할 수 있다. 어떤 데이터가 state가 되어야 할까? 부모로부터 props를 통해 전달되는가? 시간이 지나도 변하지 않는가? 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? 위 질문에 하나라도 yes가 나.. React | What is React? Why React? 웹의 규모가 커지면서 동시접속자 수와 데이터의 양이 폭발적으로 증가했고, 이 결과로 웹 3세대의 시대가 도래하게 된다. 이러한 흐름속에서 기존의 DOM, jQuery만으로는 새로운 웹 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌다. 규모가 커지고 복잡해진 웹 애플리케이션의 데이터 관리 / 코드 유지 보수를 편리하게 하기 위해 다양한 Frontend Framework 및 Library가 등장한다. React는 이 중 Frontend Library에 해당한다. What is React ? - 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리 - 컴포넌트 단위로 이루어진 UI 라이브러리 위 단어에서 생소하게 느껴졌던 단어, 라이브러리와 컴포넌트 아래로 각각 정리해본다. .. 이전 1 2 다음
