[리액트] styled-components로 css관리하기
2022. 12. 22. 17:32
리액트
styled-components https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com styled-components는 리액트에서 스타일을 관리하기 쉽게 해준다. 리액트에서는 개별적으로 컴포넌트에 대한 css파일들을 분할해서 만들었다해도 전역적으로 사용할 수 있다. 예를 들어, 'form-control'이라는 클래스이름에 css속성을 주면 다른 컴포넌트에서도 이 클래스이름을 사용하여 스타일이 지정되는데, 이는 여럿이서 작업할 때 클래스의..
[리액트] 컴포넌트 style속성 className을 사용해 동적으로 바꾸기
2022. 12. 22. 17:14
리액트
컴포넌트 style속성 className을 사용해 동적으로 바꾸기 리액트에서는 컴포넌트의 style속성에 다음과 같이 인라인 속성으로 동적인 효과를 줄 수 있지만, 이보다는 className을 활용하여 css로 관리하는 것이 편하다. 위와 같이 input의 텍스트가 아무것도 없을경우 isValid라는 state를 활용하여 직접 inline스타일을 줄 수도 있지만, 아래와 같이 사용하는게 적절하다. 위와 같이 isValid가 false이면 className에 'invalid' 클래스를 추가하고 css파일에서 관리하는게 더 좋다.
백준 1920 수 찾기 (자바, 파이썬)
2022. 12. 21. 23:10
백준
풀이 및 해설(주석) [자바] import java.io.*; import java.util.*; public class Main { public static StringBuilder sb = new StringBuilder(); public static void main(String[] args) throws IOException { BufferedReader bf = new BufferedReader(new InputStreamReader(System.in)); int N = Integer.parseInt(bf.readLine()); int[] arr1 = new int[N]; StringTokenizer st = new StringTokenizer(bf.readLine()); for (int i =..
[리액트] jsx코드에 동적인 style속성 주기
2022. 12. 21. 21:49
리액트
jsx코드에 동적인 style 속성 주기 jsx 태그들에 className과 같이 style 속성을 동적으로 바꿔줄 수 있다. 아래의 코드는 props의 데이터에서 maxValue를 100이라 치고 현재의 value에 따라 높이를 바꿔주는 코드이다. 즉, maxValue와 현재 value의 값에 따라 동적으로 높이를 바꿔준다. style에는 이중 중괄호로 묶어 키와 값을 입력해준다. background-color와 같이 -이 있는 속성일 경우 'background-color'로 문자열로 묶어주거나, backgroundColor로 카멜케이스를 사용한다. ChartBar의 부모 Chart.js Chart.js에서는 부모에게 받은 데이터의 value값을 통해 최대값을 찾고, 제일 자식인 ChartBar에게 p..
[리액트] 데이터 부모한테 주기
2022. 12. 20. 23:44
리액트
데이터 부모한테 주기 props를 통해 부모가 자식한테 데이터를 넘겨주고 자식은 그 데이터를 props.을 통해 사용할 수 있었다면, 그 반대도 가능하다. 아래의 코드는 입력받은 데이터를 부모한테 전해주는 코드이다. App -> NewExpense -> ExpenseFrom 으로 부모 -> 자식이 형성되어 있다. ExpenseForm 부터 차례대로 보겠다. 사용자에게 입력받은 데이터를 동적으로 변화를 주기 위해 state를 사용하여 저장할 것, 현재는 빈 문자열 입력 받을 때마다 이벤트를 줘서 set...을 통해 사용자가 입력한 값으로 바꿔준다. value라는 속성을 사용해 양방향 바인딩을 하고 onChange라는 속성을 통해 바뀔때마다 데이터를 저장한다. 이제 Add Expense라는 버튼을 누르면 세..
[리액트] 반복과 조건
2022. 12. 20. 23:29
리액트
반복과 조건 페이지를 구성하다보면 컴포넌트의 재사용을 위해 컴포넌트를 반복해서 데이터를 동적으로 렌더링할 필요가 많다. 또한 이때, 조건이 붙는 경우가 많다. 반복은 아래와 같이 자바스크립트의 문법과 같이 할 수 있다. 위 사진은 App에서 내려받은 배열안의 여러 객체의 props를 filteredExpneses라는 변수로 현재 state의 연도와 같은 데이터만 필터링 하여 ExpensesList라는 컴포넌트에 내려준다. props 데이터의 조건과 반복 ExpensesList는 props가 없으면 위의 h2태그를 렌더링시키고(조건), 있다면 props.items.map함수를 통해 items의 개수만큼 반복하며 ExpenseItem이라는 컴포넌트에 다시 props를 내려준다.(반복) 이를 통해 items의..
[리액트] props로 데이터 부모에서 자식으로 내려주기
2022. 12. 20. 23:21
리액트
props를 사용해 데이터 자식으로 내려주기 리액트로 컴포넌트를 구성하다 보면 한 곳에 데이터를 모아두고 이를 적절히 다른 컴포넌트에 내려주어 사용할 필요가 많다. 이를 위해서 props라는 속성을 사용해 자식으로 데이터를 내려줄 수 있다. 위의 사진에서 보면 App이 가지고 있는 데이터를 state를 사용하여 동적으로 변할 수 있게 바꿔주고 이를 Expenses라는 컴포넌트에 item={expenses} 형태로 내려준다. 이는 자식에서 props로 접근하여 item이 키, expenses가 값으로 사용 가능하다. 이런 식으로 props.키 를 사용하여 접근 가능하다. 함수도 내려줄 수 있다. 각 컴포넌트에 내려줄 때 필요한 값만 골라 내려줄 수도 있고 자식의 자식.. 한테 계속 해서 내려줄 수 있다. ..
[리액트] state
2022. 12. 20. 22:52
리액트
리액트의 state 리액트에서는 return 되는 태그들의 동적 변화를 위해서는 state로 데이터 관리가 필요하다. 예를 들어 이런 식의 코드가 있을 때 chang라는 버튼을 클릭하면 p태그 안의 data가 안녕에서 반가워로 바뀌고 반가워가 화면에 렌더링 되야하지만, 리액트의 작동 방식에 어긋나므로 바뀌지 않는다. 그래서 state를 사용한다. 사용법 // 1. useState 불러오기 import {useState} from 'react' const App = () => { // 2. 두개의 요소 배열 생성 후 useState를 통한 데이터 넣어주기 // 현재 data에는 '안녕'이 저장되어 있음, setData는 data를 변경해주기위한 함수 const [data, setData] = useStat..