복습용연습장

https://hyunu0504.github.io/blog11/ React App hyunu0504.github.io useState는 값이 변경될때마다 재랜더링이 일어난다. useRef는 값이 변경되더라도 useState와 다르게 재랜더링이 일어나지 않을 뿐 다른 useState때문에 재랜더링이되더라도 useRef는 변경된 값을 유지한다. 그러면 var/let/const와 동일하다고 생각하겠지만 재랜더링이 된다면 컴포넌트안에 있는 함수가 재 실행된다. 그러면 컴포넌으에 있는 var/let/const 변수들은 초기값으로 다시 설정되기 때문에 재랜더링을 해도 변경된 값을 가지고있지 못한다. 즉 useRef는 값이 변경되는것을 유지해야하고 재랜더링은 필요없을때 사용한다. useRef 사용법 useRef를 i..

REACT 2022. 7. 12. 23:43

https://hyunu0504.github.io/blog10/ React App hyunu0504.github.io 위 사이트는 props를 사용하지않고 Context API를 사용해서 아래 사진의 컴포넌트들로 이루어진 컴포넌트를 만들었다. APP안에있는 state값을 false로 대입하고 하위 컴포넌트에 버튼을 만들어서 버튼 클릭시 state값이 true로 바뀌도록 설정했다. true일때는 background, color를 black, white로 설정했다 APP컴포넌트의 데이터를 Header, Nav, Section, Aside에 전달한다고 가정할때 props는 APP 컴포넌트에서 Main 컴포넌트로 전달하고 또 props로 전달해야 한다 상위 컴포넌트의 state를 하위 컴포넌트에서 props할때..

REACT 2022. 7. 10. 11:02

props는 부모의 데이터를 자식 컴포넌트에서도 사용할 수 있게 해준다. 1번 부모 컴포넌트안에 2번 자식 컴포넌트안에 3번 자식 컴포넌트가 있다. 2번 컴포넌트에서 1번 컴포넌트의 데이터를 사용하려면 props로 1번에서 2번으로 한번 전달하면 된다. 3번 컴포넌트에서 1번 컴포넌트의 데이터를 사용하려면 props로 1번에서 2번에서 3번으로 전달해야 한다. props 사용법 1번의 데이터를 props 자식 컴포넌트에서 부모 컴포넌트의 데이터를 사용하고 싶으면 props를 받으려는 자식 컴포넌트 사용하는 곳 안에 작명 = { 전송할 데이터 } 자식 컴포넌트 function에 인자로 props를 받고 부모 컴포넌트의 데이터를 사용할때는 props.작명 그것을 또 자식 컴포넌트한테 props하려면 현재 a..

REACT 2022. 7. 9. 16:51

https://hyunu0504.github.io/blog9/ React App hyunu0504.github.io useEffect 사용법 useState와 마찬가지로 useState를 import 해준다. useEffect는 컴포넌트가 처음에 처음에 mount될때, 업데이트될때, unmount될때 사용한다. useEffect는 랜더링이 다 되면 실행되기 때문에 오래걸리는 작업에 사용한다. useEffect는 인자로 콜백함수를 받는다. 첫번째 경우 useEffect( () => { //실행할 코드 } ) 1. mount될때 2. 재랜더링될때 실행된다. 두번째 경우 useEffect( () => { //실행할 코드 } , [ value ] ) 1. mount될때, 2. Dependency array 내부..

REACT 2022. 7. 6. 20:28

https://hyunu0504.github.io/blog8/ React App hyunu0504.github.io 리액트 훅이란 함수형 컴포넌트에서 클래스형 컴포넌트에서 사용하는 기능을 사용할 수 있게 한다. useState는 상태관리 함수다. let/var/const처럼 값을 저장할때 사용한다. 사용방법은 useState를 import 한다. var/let/const [ 작명, set작명 ] = useState( 초기값 ) 배열형태로 받는다 첫번째는 변수의 이름이다. 두번째는 값을 변경할때 사용한다.( set~~로 작명한다. ) 위에서 setTime( 변경할 값 )을 입력하면 useState안의 값이 변경된다. 세번째 useState는 초기값이다. useState을 이용해서 초기값 1에서 2개의 버튼..

REACT 2022. 7. 5. 00:31

styled-components 라이브러리를 사용하면 className을 선언하지않고 css를 할 수 있다. 설치방법은 터미널창에 npm install styled-components css를 입힌 컴포넌트다. js파일에 import 한다 사용은 변수로 만들어서 컴포넌트처럼 사용한다. const Box = styled.div` font-size:300px; color:red; ` 변수명은 대문자로 작성한다. const 변수명 = styled.태그` css ` styled.태그의 백틱안에 css을 작성하면 된다. 작성은 컴포넌트랑 동일하다. 확장자로 vscode-styled-components를 설치해주면 백틱안의 코드들이 css처럼 보기좋게 색이 변하고 자동완성이 된다.

REACT 2022. 7. 1. 02:12

리액트에서 css 하는 방법 1. JSX에서 스타일링 style = 중괄호안에 중괄호로 객체처럼 받는다 key값에는 속성을 value에는 속성값을 적는다. 띄어쓰기는 카멜케이스로 작성한다 숫자는 px이 들어가는 경우에는 문자열이있기 때문에 따옴표 안에 작성하고 그게 아니면 따옴표 없이 작성한다. 2. css파일 import 하기 css파일 만들고 import ' css파일 경로 ' 3. css module css module로 css파일을 생성하면 동일한 className을 가지고있어도 충돌이 생기지 않는다. css파일 작명을 ~~.css가 아닌 ~~.module.css 로 작명한다 import할때는 import 작명 from ' css module 파일 경로 ' 2개의 css 모듈 파일을 생성하고 동일..

REACT 2022. 6. 30. 02:08

컴포넌트는 html, css, js 로 만든다. 리액트는 컴포넌트로 이루어진다. 컴포넌트는 대문자로 작명하고 장점은 재활용이다 컴포넌트에서 return안에 태그는 하나의 태그로 시작해서 하나의 태그로 끝나야 한다. import export를 통해서 다른 파일의 컴포넌트를 사용할 수 있다. export export default 컴포넌트명; export는 다른 파일에서 컴포넌트를 사용할 수 있게 해준다. import import 작명 from ' export한 경로 ' export한 파일을 import해서 사용한다. import해서 작명한것을 또는 으로 사용 할 수 있다. App 컴포넌트 안에 Hello, World 컴포넌트 Hello 컴포넌트안에 World 컴포넌트가 있는 코드다. import './Ap..

REACT 2022. 6. 27. 00:17