[React] 글자 수 검사 글자 수 길이 체크 //길이 검사 checkLength = (title, contents, broadTitle, broadSummary) => { const texts = [title, contents, broadTitle, broadSummary]; const fieldShow = ["제목", "신청내용", "방송 제목", "방송 요약"]; const limit = [30, 1000, 20, 200]; for(var i=0; i FrontEnd/React 2022.01.11
[React] 컴포넌트 반복(map()과 key) https://foxtrotin.tistory.com/219 React-컴포넌트 반복(map()과 key) HTML을 보면 반복되는 코드를 작성할 때가 있다 1번 2번 3번 이런 건 어떻게 효율적으로 바꿀 수 있을까? map()함수를 써봅시다 map() 맵은 파라미터로 전달된 함수로 배열 내 각 요소를 프로세싱하고 foxtrotin.tistory.com FrontEnd/React 2022.01.11
[React] map 형식 안에서 if문 사용하기 3항 연산자, if문 두가지 방법이 있음 3항 연산자 사용법 .map(id => { return this.props.schema.collectionName.length { if(this.props.schema.collectionName.length < 0) return return hejsan } 출처 : https://stackoverflow.com/questions/44969877/if-condition-inside-of-map-react If condition inside of map() React I have a map()function that needs to display views based on a condition. I'v.. FrontEnd/React 2022.01.07
[React] setState 다양하게 적용하기 매개변수 값에 따라 State 키를 다르게 지정하는 방법 //모달 창 활성화 modalOpen = (e) => { let modal = e.adminCheck this.setState({ ["modal"+modal]: true }) } FrontEnd/React 2022.01.05
[React] map의 마지막 순서 구하기 row.map((rank, i, row) => { if (i + 1 === row.length) { // Last one. } else { // Not last one. } }) 출처 : https://stackoverflow.com/questions/38176352/javascript-map-array-last-item Javascript Map Array Last Item I have this: map = ranks.map((row, r) => ( row.map((rank, i) => { return [element(r, i, state, rank, toggled, onClick)]; }) )); It maps through a 2-dimentional array. After each row... s.. FrontEnd/React 2022.01.04
[React] 동적 키 이름을 가진 setState () 첫번째 전체 키 사용 inputChangeHandler (event) { var stateObject = function() { returnObj = {}; returnObj[this.target.id] = this.target.value; return returnObj; }.bind(event)(); this.setState( stateObject ); }, ES6 또는 Babel 변환기를 사용해 JSX 코드를 변환하는 경우 -> 더욱 단순하게 사용 가능 inputChangeHandler (event) { this.setState({ [event.target.id]: event.target.value }); // alternatively using template strings for strings /.. FrontEnd/React 2021.12.28
[React] map() if문을 filter로 map()안에서 if문을 사용한 코드 const sample = [{name: "a", age: 22, role: "member", pay: 100}, {name: "b", age: 25, role: "member", pay: 120}, {name: "c", age: 30, role: "leader", pay: 130}, ]; const result = sample.map(data => { if(data.role !== "leader") return {data.name}; } ); ★ filter()를 사용하면 더 깔끔 filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 const sample = [{name: "a", age: 22, role: "member", p.. FrontEnd/React 2021.12.23
[React] JSX 컴포넌트 반복 렌더링 자바스크립트 반복문을 통해 DOM에 JSX을 렌더링하고 싶을 때 return 문 안에서 for문을 사용하지 못함 방법 세가지! return문에서 JSX를 반환하는 함수 호출 JSX 루프 렌더링 시에 반드시 key값을 unique하게 할당해줍니다 - react specific - 장점: 재사용이 용이함, return문이 깔끔 // right function App() { const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; const rendering = () => { const result = []; for (let i = 0; i < weekArr.length; i++) { result.push({weekArr[i] + " / "}); .. FrontEnd/React 2021.12.23