React32 [React] Class를 이용한 옛날 React 문법 강사님 왈! class 컴포넌트는 변수랑 함수를 많이 보관할 수 있는 통이다! 우선 extends React.Component 룰 붙여주고 constructor, super, render 이 세가지를 채워줘야 한다! 이와 같은 구조르 형성되어 있다. 그냥 기본 템플릿 이라고 생각하면 된다. render()이후 중괄호 안에 return 을 넣어준다. class 컴포넌트에서 state 를 만들려면? constructir 안에다가 this.state를 넣고 중괄호를 넣는다. 이 state 안에 오브젝트(왼쪽 변수 오른쪽 데이터 값)를 넣어줄 수 있다. this.state에 이름과 나이를 저장했고 그 값을 쓰고 싶으면 위에처럼 thisstate.name or age 의 데이터 값을 가져다 쓸 수 있음. stat.. 2023. 1. 22. [React] 블로그 글 발행 기능 다루기 그전에 숙제!! onChange 를 이용해서 setOnChangeDate안의 데이터 값을 값이 입력 될 때마다 입력해 준다. 이때 input 태그에 value 값을 포함시켜 입력창 위의 값을 컨트롤 해준다(입력후 입력창 비우게 하기) 이후 추가 버튼을 누르면 {} 내부의 함수를 콜백하는데 이때 중요한것이 함수로 값을 넘겨주어야 한다. onClick 같은 이벤트 핸들러 함수 안에 바로 setState 함수를 넣으면 해당 컴포넌트가 랜더링 되자마자 바로 setState 함수가 실행되어서 그 결가값(undefined)이 onClick에 들어간다. 결국 렌더링 과정에서 array이 state 값이 변하게 되면서 리렌더링을 하고 onClick에 다시 setArray()의 결과 값을 넣어주기 위해 setArray .. 2023. 1. 21. [React] 사용자가 입력한 글 다루기. input 활용하기 을 통해 다양한 입력방식이 가능하다 input 여러 종류들 input 여러 종류들 range checkbox date select textarea 위와 같은 다양한 input 기능들이 있는데 onChange / onInput 을 통해 코드의 상호작용이 가능하다. onChange 는 유저가 input 안에 타이핑이나 선택을 할 때마다 어떠한 동작을 하게 된다. 입력 할 때마다 1이 출력되고 있는 것을 확인 할 수 있다. 이벤트 핸들러의 여러가지 기능! onMouseOver={} 인풋에다가 마우스를 가져다 댔을때 코드실행 onScroll={} 이 태그에 스크롤바가 있으면 스크롤바를 조작 할 때 마다 코드 실행 이외에도 이벤트 핸들러 종류 많음!! 검색해봐라잇! input에 입력한 값 가져.. 2023. 1. 21. [React] props 를 이용해 부모의 state를 얻어 쓰자!!// 상세 페이지도 만들어보자! 일단 보면 그 전까지 구상한 코드부터 살펴보자 이 컴포넌트 함수가 Main 함수이고 지금 화면을 뿌려주는 놈이다. 이 함수안에 모달이라는 놈이 살고 있다. 이때! 자식 컴포넌트인 Modal 에게 위의 BlogMain 이 가지고 있는 state 값을 전달하고 싶으면 BlogMain에 포함되어있는 Modal 컴포넌트에서 props 로 전달할 데이터를 담을 그럴듯한 이름을 하나 짓고 그 데이터 값을 담아준다! 그렇게 전달한 props 의 값을 받기 위해서 자식컴포넌트에서 가장 먼저 해줘야 하는것은 props 라는 파라미터를 받아준다. 그리고 이 props뒤에 .을 붙이고 가져온 데이터를 담은 변수를 가져오면된다! array의 데이터 값을 담은 변수의 이름 name 이 변수의 값을 props 에서 꺼내온다 pr.. 2023. 1. 20. [React] map 사용하기. 반복문으로 같은 html 축약하는 방법. Map 모든 array 자료 뒤에다가 map 을 붙일 수 있다 map을 쓸 때 콜백함수를 쓰는데 여기서 콜백함수란 소괄호 안에 함수를 집어넣는것을 콜백함수라고 한다. 앞에 선언된 Array 개수 만큼 함수가 실행된다. 함수 안에 임의의 변수 파라미터를 넣어주면 그 변수는 해당 함수 안에서 array 값들을 갖게된다. return에 특정한 값을 담아주면 array에 담아줌.(array 개수만큼 . 보통 반복문의 경우 for 을 쓰는데 return 문 {} 안에서는 map을 쓴다. 약간 이런느낌으로 안녕 가 3번 반복된다고 생각하면 된다. 이 안녕 위치에 반복되어 출력되길 원하는 부분을 넣어주면 반복되어 출력하는 모습을 확인 할 수 있다. 이 기능을 이용하면!! 현재.. 2023. 1. 19. [React] React 컴포넌트와 모달창 개념! 버튼을 클릭했을 때 array 가 가나다 순으로 정렬을 하게 만들어라 let [a, setA] =[가, 나 , 다] onClick = () =>{ let sortA = [...a]; sortA.sort(); setA([sortA]); } sortA 라는 다른 화살표에 기존의 화살표 정보값을 받아주고 그 화살표가 가르키는 array 를 정렬해 준후에 그 값을 setA 에 담아주면 다른 화살표로 인식해서 변화를 적용해 준다. 글 제목을 누르면 상세페이지 만들기(모달 창) html 자체로 두면 너무 난잡하고 더럽다-> 컴포넌트를 만들자 1. function을 만들어 준다(다른 함수 바깥에 만들어 줘라) 이름의 첫 단어는 대문자로!! 2.return () 안에 html을 담기 3. 쓰기 이렇게 html 이 다로.. 2023. 1. 19. 이전 1 2 3 4 5 6 다음
