목록ReactJS (16)

대기업을 향한 디벨롭 블로그

useEffect - React Hooks 리액트훅

useEffect는 React Hooks중에있는 렌더링에 관한 훅이다. 컴포넌트를 useEffect를 이용하여 처음렌더링될때 , 업데이트될때 , 제거되었을때의 코드를 집어넣을 수 있다. 코드로 알아보자. App.js에 useEffect함수안에 console을 찍어보았다. useEffect함수는 렌더링될때마다 항상실행이된다. 버튼을 누르면 컴포넌트가 렌더링됬다가 안됬다가 하는 코드를 작성해보았다. useState가 바뀌면서 화면이 재렌더링이 될대마다 useEffect도 같이 함수가 실행된다. 이렇게 화면이 렌더링될때 useEffect가 따라다닌다. 여기서 useEffect를 설정해 줄 수 있는데 , 맨 끝에 빈배열을 넣어주면 맨처음 한번실행되고 그다음 렌더링부터는 실행이 안된다. 뒤에 배열안에는 어떤 요소..
ReactJS 2022. 7. 25. 16:00
React Bootstrap 사용하기

일단 bootstrap이란 프레임워크이다. '디자인 도우미'라고 생각해도 무방하다. CSS를 커스텀하지않고 bootstrap을 가져다써도 완성도가 좋다. 트위터에서 만든 프레임워크이며 엄청난 사랑을 받고있다. 리액트에서 bootstrap을 사용하는 법을 알려드리겠다. 먼저 react에서 npm install을 해주어야 한다. 리액트 bootstrap공식 사이트에 들어가보자. https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 들어가서 Get Started를 누르면 시작할 수 있다. 이렇게 다운로드를 받으라고 나와있다. ..
ReactJS 2022. 7. 25. 15:14
{ props defaultProps children } Component-2

이번엔 props에 대해 알아보자. props는 컴포넌트에 데이터를 넘겨줄 수 있다. 코드로 바로 알아보자. 일단 이렇게 생긴 컴포넌트가 있다. 컴포넌트를 잘 모른다면 https://mhypro.tistory.com/53 Component 컴포넌트-1 리액트 컴포넌트에 대해알아보자. 일단 리액트는 SPA(Single Page Application)이다. 코드를 짜다보면 알겠지만 index.html인 파일이 존재한다. 하나의 html안에서의 Component가 바뀌는거다. Component란 html태.. mhypro.tistory.com 이걸 추천한다. 태그안에 변수하나를 만든다고 생각하면된다. 변수명=데이터 이렇게 보내주면 된다. 그리고 컴포넌트함수에서 props로 받는다. 이름은 props가 아닌 ..
ReactJS 2022. 7. 7. 13:45
Component 컴포넌트-1

리액트 컴포넌트에 대해알아보자. 일단 리액트는 SPA(Single Page Application)이다. 코드를 짜다보면 알겠지만 index.html인 파일이 존재한다. 하나의 html안에서의 Component가 바뀌는거다. Component란 html태그들이모인 덩어리라고 보면된다. 코드로 알아보자. 먼저 Component는 함수로 만들어준다. 예전 React컴포넌트는 class로 만들어졌지만 , 새롭게 업데이트 되었다. App()함수 밑에 이렇게 Component()함수를 새롭게 만들어주었다. 여기서 실수를 많이하는점은 ✼ 컴포넌트는 무조건 대문자로 시작해야된다는점이다. App()함수도 컴포넌트이기때문에 대문자로 시작되어있다. 결론은 컴포넌트는 무조건 대문자로 시작해야 적용이된다. 이렇게 App함수 리..
ReactJS 2022. 7. 7. 10:32
이전 Prev 1 2 3 4 Next 다음