본문 바로가기

분류 전체보기155

[React] props : 부모가 가진 state를 자식에서 사용하고 싶을 때 props란? 부모 컴포넌트에서의 state를 자식 컴포넌트에서 사용하려고 할 때 {부모에 있는 state이름} 이렇게 대충 들고올 수 없다. props 문법을 이용해서 전송해 줄 수 있다. props로 자식에게 state 전달해주는 방법 1 { modal === true ? : null } 보통 작명은 state명과 똑같이 해주는 편이다. 2 자식 컴포넌트에서 props 파라미터 입력 후 사용한다. function Modal(props){ return( 제목 {props.글제목}> 날씨 상세내용 ) } 사용할 때는 {props.글제목} 이런식으로 props에서 들고와야한다. 2021. 7. 22.
[React] map()/ for 반복문 리액트에서는 html을 반복문으로 반복시킬 수 있다. map() 함수 개념 array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 사용. //자바스크립트 표현 var arr = [2, 3, 4]; arr.map(function(a){ return a * 2 }); //(3) [4, 6, 8] arr 내에 있는 데이터들을 파라미터 a에 넣어서 모두 2씩 곱해줄 수 있다. map은 유사 반복문이다. React에서 반복문 쓰는 법 : .map() 우선 JSX 중괄호 내에서 for을 사용할 수 없다. map()은 사용가능하다. 공식 { 반복할데이터.map(() => {return}) } 예제 파라미터에 넣은 '글'은 array 안에 있던 하나하나의 데이터기 때문에 html에 {글}을 넣어주면 array가.. 2021. 7. 22.
[React] IF문 삼항연사자/ 클릭하면 동작하는 UI 창 만들기 JSX에서 IF문 사용하기 JSX에서 자바스크립트를 사용하려면 {} 중괄호 안에 넣으면 되는데 IF문이 들어올 수 없다. 그래서 삼항 연사자로 사용한다. { 1 < 3 // 조건식 ? console.log('맞아요') //참일 때 실행할 코드 : console.log('틀러요') //거짓일 때 실행할 코드 } 클릭하면 등장하는 모달창 만들기 1. UI가 보이는/ 보이지 않는 상태정보를 state에 저장한다.(보통 true/false 자료형으로) let [modal, modal변경] = useState(false); 모달창을 켜고 닫는 스위치이다. 2 if문을 이용해 state가 true일 때 UI를 보여준다. { modal === true ? : null //텅빈 HTML이라는 뜻 } state가 tru.. 2021. 7. 22.
[React] ReactDom.render create-react-app을 통해 리액트 프로젝트를 생성하면, 다음과 같은 코드를 index.js에서 볼 수 있다. ReactDOM.render( , document.getElementById('root') ); ReactDom.render 코드는 React 컴포넌트를 웹 브라우저에 렌더링 하는 api이다. 2021. 7. 22.
[REACT] Component Component 란? HTML을 한 단어로 줄여서 사용할 수 있는 문법. 컴포넌트 만들기 1 함수를 만들고 이름을 짓는다. 2 축약을 원하는 html을 넣는다. 3 원하는 곳에 을 입력하고 사용한다. function Modal(){ return( 제목 날씨 상세내용 ); }; //사용할 때 컴포넌트 특징 - 이름은 대문자로 시작한다. - return() 안에 태그 하나로 묶어줘야 한다. - 의미없는 를 사용하기 싫을 때 , 를 사용할 수 있다. - 장점 : 컴포넌트를 사용하면 관리가 편해진다. - 단점 : state를 쓸 때 복잡해진다. 상위 component에서 만든 state를 쓰기 위해 props 문법을 사용해야한다. - 만드는 기준 반복출현하는 html 덩어리들 자주 변경되는 html ui들 다.. 2021. 7. 21.
[REACT] State 데이터 변경 state 데이터 수정하기 1 기존 state의 카피본을 만든다. 이때 Reference Data Type의 특징이 나타나지 않도록 주의한다. 밑의 예시와 같이 state의 값을 직접 건들면 안된다. var newArray = 글제목[0] = 1123123; var newArray = 글제목; //이러한 것들은 복사가 아닌 값 공유의 뜻으로 해석된다. 기존 state의 카피는 Deep copy를 통해 해준다. var newArray = [...글제목]; //글제목의 state에 있는 데이터 배열을 그대로 복사해서 들고온다. Deep copy : 값을 공유하지 않고 서로 독립적인 값을 가지는 복사본을 만드는 것. 2 카피본에 수정사항을 반영한다. newArray[0] = '여자코트 추천'; 3 변경함수에 .. 2021. 7. 21.
반응형

티스토리툴바