Frontend/React21 [React] 클래스형 컴포넌트 1. 클래스형 컴포넌트 react 컴포넌트 선언하는 두가지 방식 중 하나. 현재 자주 사용하지 않지만, 사용하는 기업들이 있으므로 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다. componentDidMount() 마운트된 직후, 즉 트리에 삽입된 직후 호출된다. import React from 'react'; import Header from '../layout/Header'; import Footer from '../layout/Footer'; class Main extends React.Component{ state = {}; componentDidMount(){ } render(){ return( We Provide visual coding solutions f.. 2021. 8. 16. [React] map 1 map 배열 안의 모든 자료에 똑같은 작업을 하나씩 시켜주고 싶을 때 사용하는 내장 함수 import React from 'react'; import Header from '../layout/Header'; import Footer from '../layout/Footer'; function Info({text}){ return( {text} ) } const textInfo = [ {text : "WE PROVIDE"}, {text : "VISUAL CODING"}, {text : "SOLUTIONS"}, {text : "FOR YOU WEBS"} ] function Main(){ return( {textInfo.map((el) => ( ))} ); } export default Main; 2021. 8. 16. [React] 객체 생성 및 객체 호출 객체 생성 const textInfo = "Hello" const textInfo = { text1 = "WE PROVIDE", text2 = "VISUAL CODING", text3 = "SOLUTIONS", text4 = "FOR YOU WEBS" } 객체 호출 function Main(){ return( ) } 2021. 8. 16. [React] props 1 props 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것. props 사용방법 1. 변수명을 넣고 싶을때는 중괄호를, 일반 텍스트를 전송할 때는 따옴표. 2. 자식컴포넌트 선언하는 function 안에 파라미터를 하나 만들어준다. import React from 'react'; import Header from '../layout/Header'; import Footer from '../layout/Footer'; function Info(props){ return( {props.text1} {props.text2} {props.text3} {props.text4} ) } function Main(){ return( ) } export default Main; props 생략 impor.. 2021. 8. 16. [React] 객체화 시키기 - Component 1 component 만들기 복잡한 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있다. Component 방법 - function을 이용해서 함수를 하나 만든다. - 그 함수 안 return()을 적고 원하는 HTML을 담는다. - 원하는 곳에 라고 사용하면 함수에 축약한 HTML이 등장한다. 이렇게 축약한 html 덩어리를 component라고 한다. import React from 'react'; import Header from '../layout/Header'; import Layout from '../layout/Layout'; import Title from '../basics/Title'; function About(){ return ( 꿈을 설계하고 디자인 하다. 나는 공간을 만드는 것.. 2021. 8. 16. [React] 제목을 누를 때 각각 다른 UI가 나오도록 하기. 제목을 누를 때 각각 다른 모달창이 뜨도록 하기. 1 몇번째 제목을 눌렀는지 상태정보를 state에 저장하고 2 state가 0일 때는 0번째 제목을 출력, state가 1일 때는 1번째 제목이 나오도록 출력해야 한다. UI 만드는 법 1 UI와 관련된 중요 정보들을 state로 저장해놓고 2 state에 따라서 UI가 수정되게 만든다. ※ state는 UI의 현재상태를 보관하는 저장소역할을 하는구나라고 생각하면 된다. 1 모달 컴포넌트에서 제목을 눌렀을 때 누른 제목의 숫자가 나오게 한다. function Modal(props){ return( {props.글제목[누른제목번호]} 날짜 상세내용 ) } 2 변수 지정 중요한 정보는 일반 변수가 아니라 state로 만든다. let [누른제목, 누른제목변경].. 2021. 7. 22. 이전 1 2 3 4 다음 반응형
